[CSS] 列表清單項目字太長斷行

重點

white-space: normal：讓li不要斷行。
word-wrap: break-word;：讓span斷行。
white-space: normal：span中連續的空白字都縮減為一個空白。

原文

I added white-space: nowrap to the li elements to keep the inline child elements on one line. You then need to add white-space: normal to the .message span to keep the break-word-wrapping the way you need it. Remember that white-space is inherited, so you need to reset it to normal for the inline span.

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

---

Source

☞ span word-wrap in list elements
☞ 螞蟻的CSS: white-space 第一頁
☞ The Will Will Web: 如何顯示固定寬度的 Label, 超過會顯示 ...
☞ 梅問題教學網: 免寫程式！透過CSS3將多行文字自動省略，並出現….
☞ CSS 限制字數/行數，讓過長的文字隱藏變"…" | CSS to make text overflow elegant is with ellipses, single or multiple lines

Image Source

☞ List Shortcodes