html - li 上的“自动换行”而不是单个单词

Question

我正在生成一个标签列表(采用 ul/li 格式)，我希望在 li 上出现换行符而不是 li 中的单个单词或字符.

到目前为止，我发现唯一可以执行任何操作的 css 命令是 word-break如果是break-all它会在任何字符后中断，normal (或默认为 normal 的任何其他内容)在空格或破折号后中断 -

Fiddle

目前我的css如下:

li { 
  display: inline;
  line-height: 24px !important;
  border: 1px solid black;
  word-break: normal;
}

Answer 1

如果我没理解错的话，你只需要将li设置为display:inline-block

li {
  display: inline-block;
  line-height: 24px;
  border: 1px solid black;
}

<ul>
  <li>This longword tag One</li>
  <li>This longword tag Two</li>
  <li>ThislongwordtagThree</li>
  <li>This longword tag Four</li>
  <li>This longword tag Five</li>
  <li>This longword tag Six</li>
  <li>This longword tag Seven</li>
</ul>
<ul>
  <li>This longword tag One</li>
  <li>This longword tag Two</li>
  <li>ThislongwordtagThree</li>
  <li>This longword tag Four</li>
  <li>This longword tag Five</li>
  <li>This longword tag Six</li>
  <li>This longword tag Seven</li>
</ul>