将文本包装在css中的span元素中

Question

我有一个span元素，该元素显示为大于其父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>