Html 列表项文本在占据剩余空间之前在标记下换行

发布于10月18日

我试图在列表项中换行文本，但由于某种原因，文本被推到项目符号下的行上.理想情况下，我希望文本在换行到下一行之前用项目符号填充第一行.我不想使用列表样式的位置:外部，因为我不想处理位于容器外部的子弹.

.list-item {
  display: list-item;
  background-color: gray;
  width: 100px;
  list-style-position: inside;
  overflow-wrap: break-word;
}

<div class="list-item">
  testlonglistitemtext
</div>

推荐答案

您可以try 使用word-break: break-all代替overflow-wrap: break-word:

.list-item {
  display: list-item;
  background-color: gray;
  width: 100px;
  list-style-position: inside;
  word-break: break-all;
}

<div class="list-item">
  testlonglistitemtext
</div>

这两个属性的MDN注释总结了差异.

break-word的音符:

与...overflow-wrap: break-word...不同，word-break: break-all将在文本溢出其容器的确切位置创建一个分隔符(即使将整个单词放在一行中也不需要分隔符).

相应的音符为overflow-wrap:

与word-break不同的是，overflow-wrap只有在无法将整个单词放在它自己的行上而不溢出时才会创建分隔符.

简而言之，之所以出现这种行为，是因为overflow-wrap: break-word将tries to fit as much of the word as possible放入行框前断开，而word-break: break-all breaks as soon as it needs to则将单词保留在内容框内.