Question

我想创建一个水平列表并在li里面启用分词功能。

以下示例输出如下：

|---------element width---------|
abcdefghij ABCDEFGHIJ 
aaaaaaaaaaaaaaaaaaaaaaaaaa

这就是我想要的：

|---------element width---------|
abcdefghij ABCDEFGHIJ aaaaaaaaaa
aaaaaaaaaaaaaaaa

我尝试向左浮动，其他断字css，指定宽度或最大宽度等。

li { display : inline-block; word-break : break-all; }

            <ul>
                <li>abcdefghij</li>
                <li>ABCDEFGHIJ</li>
                <li>aaaaaaaaaaaaaaaaaaaaaaaaaa</li>
            </ul>

Answer 1

所以解决方案是here

您需要将父<ul>置为word-break: break-all属性，这会在子元素溢出时中断子元素。需要使用<li>属性设置子block: inline个元素，以使它们显示在一行中。

＆＃13;

ul {
  width: 250px;
  word-break: break-all;
}
li {
  display: inline;
}

＆＃13;

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Word Break Test</title>
</head>

<body>
  <ul>
    <li>abcdefghij</li>
    <li>ABCDEFGHIJ</li>
    <li>aaaaaaaaaaaaaaaaaaaaaaaaaa</li>
  </ul>
</body>

</html>

＆＃13;

Answer 2

要达到您想要的效果，您必须使用word-wrap: break-word。

http://www.w3schools.com/cssreF/css3_pr_word-wrap.asp

Answer 3

自动换行有4个值：

word-wrap: normal|break-word|initial|inherit;

但在您的示例中，您已标记为display : inline-block;

所以word-wrap:break-word会起作用。请实施

如何使用CSS在水平列表项中断字

3 个答案: