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

html-css017

css 怎么在ul里面的li 的文字如何让它折行?,第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

经测试对中文也有效。

假设图片的宽度为100px,高度为50px那么5张就是500px,如果在加上图片之间的距离,比如每张之间为10px,那么总的宽度就是500px+40px=540px那么你的div宽度可以设置540px;或者更大点也行!我以7张图片为例!

<head>

<style type="text/css">

div{width:540pxoverflow:hidden}

div img{width:100pxheight:50pxdisplay:blockfloat:leftmargin-left:10px}

div img.first{margin-left:0px}

</style>

</head>

<body>

<div> 

<img class="first" src="">

<img src="">

<img src="">

<img src="">

<img src="">

<img src="">

<img src="">

</div> 

</body>