Question

我有一个span元素，它显示为大于其父跨度的宽度，文本没有显示在下一行。

以下是代码，我尝试给word-wrap:break-word;，但仍然没有运气：

  <span style="position: absolute;width:250px;font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size: 9px;white-space: nowrap;color: rgb(51, 51, 51);margin-left: 0px;margin-top: 0px;left: 8px;top: 8px;/* display: block; */" zindex="1">

   <span style="width:100%;word-wrap:break-word;display:block">Specific Topic Discussion vs. Taken Matrix Temp:<strong> 473.761169</strong></span>
  </span>

对于父级，宽度为250px，我需要内部元素占据完整父级的宽度，并将文本换行到下一行。

如果我将父宽度作为50px，则内部跨度文本应理想地占用超过四行。但这并没有发生，内跨的宽度总是固定的。

如何将它包装到下一行？

Answer 1

如何将它包装到下一行？

将文字换行到下一行从外跨区移除 white-space。

 <span style="position: absolute;width:250px;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;font-size: 9px;color: rgb(51, 51, 51);margin-left: 0px;margin-top: 0px;left: 8px;top: 8px;/* display: block; */" zindex="1">
    <span style="width:100%;word-wrap:break-word;display:block">Specific Topic Discussion vs. Taken Matrix Temp:<strong> 473.761169</strong></span>
</span>

Answer 2

父级的white-space: nowrap属性强制子跨度保持在一行中。您可以删除nowrap属性或向子元素添加空白属性以覆盖父元素。

JSFiddle：https://jsfiddle.net/96vfagrb/

Answer 3

您需要删除第一个white-space: nowrap;

中的<span>

将文本包装在css

3 个答案: