span列表元素中的自动换行

Question

我正在尝试在列表项中包含多个span元素。当然，它们被认为是inline。当我将word-wrap: break-word属性添加到其中一个span元素时，我希望这些单词能够换行，但该元素也会换行。

在this fiddle中，您可以清楚地看到带有span类的message元素位于元素name之后。我希望这些元素内联，但是第二个用类message进行自动换行。

我想要实现的目标可以与twitch.tv聊天消息结构进行比较。

邮件的twitch.tv HTML如下：

<li class="ember-view message-line chat-line" id="ember6565">
  <div class="indicator"></div>
  <span class="timestamp float-left">3:34</span> 
  <span class="badges float-left"></span>
  <span class="from" style="color:#D2691E">yourusername</span>
  <span class="colon">:</span> 
  <span class="message" style="undefined">message here</span>
</li>

此致

Answer 1

也许以下可能是你需要的。

我将ViewController添加到white-space: nowrap元素，以将内联子元素保留在一行上。

然后，您需要将li添加到white-space: normal范围，以便按照您需要的方式保留包含字词。请注意，.message是继承的，因此您需要将其重置为white-space以获取内嵌范围。

＆＃13;

＆＃13;

normal

＆＃13;

.messages {
  list-style-type: none;
  width: 100px;
  border: 1px dotted blue;
  margin: 0;
  padding: 0;
}
.messages li {
  white-space: nowrap;
}
.messages li .message {
  white-space: normal;
  word-wrap: break-word;
  background-color: tan;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里的问题是在被推到下一行之后正在被打破。 Watch this demonstration closely

唯一的解决方案是将white-space: pre;添加到容器中：

.messages li .message{
    white-space: pre;
}

请记住，两个span标记之间的空格仍然归类为空间节点，因此它被视为在这两个span容器之间存在空格字符。

仅供参考：我也很难找到一个满意的解决方案issue sometime last year。

Answer 3

不要在跨度之间添加空间。这是关键。这允许跨度内联。

我希望这会有所帮助。请查看 fiddle