文字超出了div自动创建相同的div显示，如果再超出就又在新创建新的相同的div

您好，如果您希望文字超出div时自动创建相同的div显示，可以结合JavaScript来实现。具体实现方式如下：

1. 首先，在HTML中创建一个初始的div，设置它的class和id属性，以便后续的操作。

2. 接着，使用JavaScript获取该div的高度和宽度，以及其中的文本内容。

3. 判断文本内容是否超出该div的高度和宽度，如果超出则创建一个新的div，将文本内容添加到新的div中，并将新的div添加到原有div的后面。

4. 如果新的div还是无法容纳所有文本内容，则继续创建新的div，直到所有文本内容都被容纳。

下面是一个简单的实现示例：

<div class="text-container" id="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel bibendum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum euismod erat, eu auctor arcu tincidunt a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

const container = document.getElementById('container');
const containerHeight = container.clientHeight;
const containerWidth = container.clientWidth;
const text = container.innerHTML;
let newText = text;
let i = 1;

while (newText.length > 0) {
  const newDiv = document.createElement('div');
  newDiv.classList.add('text-container');
  newDiv.innerHTML = newText;
  container.parentNode.insertBefore(newDiv, container.nextSibling);
  const newDivHeight = newDiv.clientHeight;
  if (newDivHeight <= containerHeight) {
    container.innerHTML = newText;
    break;
  } else {
    newText = text.substring(0, text.length - i);
    i++;
  }
}

在上面的示例中，我们首先获取了原有div的高度、宽度和文本内容，并设置了一个变量newText来保存当前未被容纳的文本内容。然后，我们使用while循环来判断newText是否超出了原有div的高度，如果超出了则创建一个新的div，并将未被容纳的文本内容添加到新的div中，直到所有文本内容都被容纳。最后，我们更新原有div的内容为最后一个容纳文本的新内容。

希望这个示例能够帮助您实现文字超出div时自动创建相同的div显示的效果。