Question

我想使div或div内的跨度的行为就像纯文本一样，以便溢出内容进入下一行。

我不确定要为此使用哪些CSS属性。

我已经尝试使用

overflow-wrap: break-word;
word-break: break-all;

这是我的结构。

<div class="parent">
   <span> Some text before </span>
   <span class="makeItOverflow"> <div>Loooong text ...</div> </span>
   <span> Some text after </span>
</div>

预期具有以下图像：https://ibb.co/P1XcMh7。

Answer 1

您可以将每个span元素包装在<p>元素内，这假定这三个span元素的读法像一个句子/段落。

.parent {
  width: 300px;
}

.makeItOverflow {
  background-color: orange;
}

<div class="parent">
  <p>
    <span> Some text before </span>
    <span class="makeItOverflow">Loooong text ...</span>
    <span> Some text after </span>
  </p>
</div>

Answer 2

我找到了答案。对我来说，它是display: inline和white-space: initial和word-break: break-all的组合。我原来的结构比较复杂，但是在树上嵌入元素就可以了！

谢谢您的回答！

由于只有文本溢出，我该如何使长文本的div转到下一行？

2 个答案: