Css - 理解“word-wrap: break-word;”答案

【问题标题】：Css - understanding "word-wrap: break-word;"Css - 理解“word-wrap: break-word;”
【发布时间】：2016-04-17 03:18:25
【问题描述】：

我对 css 样式有一个小问题。如果跨度中的文本太长，我正在尝试做断线。我希望在第三个 SPAN 之前执行换行符。但是出了点问题。请寻求帮助。

代码：

<span id="j_id0:j_id12" class="sp">Abcd abcdabcd2
   <span style="border-style: dotted; word-wrap: break-word; width: 80px;" 
   class="absoluteLeft">Add you viewing ten equally believe put</span>
</span>

JsFiddle

【问题讨论】：

首先你没有 absoluteLeft 类，其次主要问题是什么？
@Adamo word-wrap: break-word; 仅适用于具有特定宽度的元素 - 因此您不能在 inline 元素上设置它。在您提供的代码中，您的 span 是内联的，这意味着宽度将被忽略，因此自动换行将不起作用。将您的跨度设为block 或inline-block 元素
jsfiddle.net/zer00ne/8k08nyr0/1
内联元素使线条牢不可破，这是它们的本性。
Yes 或 inline-block 更好，因为您希望将其与左侧的另一个跨度对齐。也删除 position: absolute 和 left:175px。读一读：stackoverflow.com/a/35251345/2813224我认为你需要做点别的。

标签： html css

【解决方案1】：

Span 是内联元素，所以不会断字。如果您需要分词，则该元素应该是一个块（例如 div）或应该这样显示（然后您需要将 display:block 添加到您的跨度的 css）。

编辑我不知道你为什么需要一个类“absoluteLeft”。我会删除它。然后我会添加一个css：

span span {
   display:inline-block;
}

当然，你必须从虚线跨度中删除一个样式 display:block;

这能解决您的问题吗？

【讨论】：

请阅读完整的问题，然后尝试给出所需输出的答案。谢谢x
我不想要 jsfiddle.net/e50dj9fa/4 但没有断线
我认为你没有使用我的小费。您仍然具有绝对定位，并且跨度的子级不会显示为内联块。看：jsfiddle.net/e50dj9fa/7

【解决方案2】：

把 display:block;跨越

<span id="j_id0:j_id12" class="sp">Abcd abcdabcd2
       <span style="border-style: dotted; word-wrap: break-word; width: 80px;display:block;" 
       class="absoluteLeft">Add you viewing ten equally believe put</span>
    </span>

【讨论】：

任何人都可以告诉我关于给予这个答案的降价，对此没有评论吗？