ul内容超出指定高度换列显示css

html-css030

ul内容超出指定高度换列显示css,第1张

ul内容超出指定高度换列显示css是因为：在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达。ul内容超出指定高度换列显示css。

直接看代码吧：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5标签</title>

<style>

p{

/**

white-space：nowrap表示文本不会换行，在同一行继续，知道遇到

标签为止；

overflow：hidden不显示超过对象尺寸的内容，就是把超出的部分隐藏了；

text-overflow：ellipsis当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；

-o-text-overflow:为了兼容opera浏览器

*/

width:200px

overflow:hidden

text-overflow:ellipsis

-o-text-overflow:ellipsis

white-space:nowrap

}

div{

/*文字超出高度不显示*/

overflow:hidden

display:block

height:60px

width:100px

}

</style>

</head>

<body>

<p>这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。</p>

<div>这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。</div>

</body>

</html>

white-space:nowrap的意思是文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。

你都不换行了，设置高度有什么用。。。

你写的没有错，但这个方法只适用于单行文本溢出时出现省略号的效果

多行文本溢出用JS吧