Question

我正在生成一个标记列表（格式为ul / li），我希望在li上出现换行符，而不是单个字词或li中的字符。

到目前为止，我发现做的唯一一个css命令是word-break，如果它是break-all，它会在任何字符后normal（或其他任何默认值）中断到normal之后-

。

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

Fiddle

我的css目前如下：

<form action="post/get" url="some-file.php">

Answer 1

如果我理解正确，您只需将li设为display:inline-block

即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果我理解你需要什么，那么只需添加

white-space: nowrap;

到你的li规则就可以了：

li { 
  display: inline;
  line-height: 24px !important;
  border: 1px solid black;
  white-space: nowrap;
}

Here's the jsfiddle

Answer 3

您可以使用display: inline-block或float: left;

＆＃39;自动换行＆＃39;李而不是单词

3 个答案: