span 列表元素中的自动换行

Question

我想在一个列表项中包含多个 span 元素。他们当然应该是inline。当我将 word-wrap: break-word 属性添加到 span 元素之一时，我希望单词换行，但元素也换行。

在this fiddle中可以清楚的看到classmessage的span元素在name元素的后面。我希望这些元素内联，但第二个元素用 class 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

也许以下是您所需要的。

我向 li 元素添加了 white-space: nowrap 以使内联子元素保持在一行上。

然后您需要将 white-space: normal 添加到 .message 范围，以保持您需要的换行方式。请记住 white-space 是继承的，因此您需要将其重置为 normal 以用于内联跨度。

.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;
}

<ul class="messages">
  <li>
    <span class="name">wILL</span>
    <span class="message">sakdjfhskdjhfksjahflkjhldkjsakljfhalskdfhqweqweqeqeqweqweqweqweqweqwe</span>
  </li>
</ul>

Answer 2

这里的问题是 seriouslyhonkinlinglongword 在被推到下一行之后被破坏了。 Watch this demonstration closely.

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

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

请记住，两个 span 标签之间的白色 space 仍归类为 space 节点，因此它被视为中间有一个 space 字符那两个 span 个容器。

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

Answer 3

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

希望对您有所帮助。检查这个 fiddle

span 列表元素中的自动换行

span word-wrap in list elements

html

css

word-wrap