CSS禁止ul内的li换行

html-css09

CSS禁止ul内的li换行,第1张

最近在写项目时遇到一个问题，实现一个导航栏，可以左右拖动，溢出body的宽时隐藏掉，于是就这样：

ul明明是没有给宽，但发现li会随着ul父级的宽度进行换行，于是呢，就去网上实验了几种方法。 其中有效的一种是这样：

到这里，大功告成，可以去愉快的拖动了！

加上如下的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

经测试对中文也有效。