Question

css 怎么在ul里面的li 的文字如何让它折行？

下面是我写的代码，这段写的是控制页面左侧的导航条。

#left{width:300px; margin:20px 0px 369px 100px;}
#left_menu{list-style-type:none; margin:0px; padding:0px; display:block;}
#left_menu li {padding:5px 5px 5px 30px;}/*怎么控制li里面的文字折行？*/

但是我往li里输入文字，当文字写多的时候，应该转到下一行了，但是文字没有折行，我想知道，我哪里写的不对？

Answer 1

加上如下的CSS设置，就是设定好宽度width，然后设置合适的word-wrap和word-break属性：

ul li{
    width: 100px;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

ul里面的li折行其实跟其他块状(block)元素的折行都是一样的。以下是相关的CSS属性：

word-warp 属性设置如何处理单词的折行，可以取的值有

word-wrap: normal | break-word

word-break 属性设置如何处理单词折断，仅支持IE，可以取的值有：

word-break: normal | break-all | hyphenate

white-space 属性设置如何处理元素内的空白。可以取的值有：

white-space: normal | nowarp | pre | pre-line | pre-warp | inherit

经测试对中文也有效。

Answer 2

left_menu 是不是ul标签额ID 如果是的话 你为什么在它后面加入display：block呢 ul本来就是块属性标签啊 如果你想让li标签的内容换行 直接设置li的宽就行了

Answer 3

中文应该是可以直接换行的，英文的话可以加：word-wrap:break-word; word-break:break-all;