span列表元素中的自动换行

Question

我想span在列表项中有多个元素.他们inline当然是假设的.当我将word-wrap: break-word属性添加到其中一个span元素时,我期待包装的单词,但元素也包装.

在这个小提琴中你可以清楚地看到span带有类message的元素在元素后面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

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

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

然后,您需要添加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>