CSS 多行文本省略(兼容IE)

html-css06

CSS 多行文本省略(兼容IE),第1张

如果实现单行文本的溢出显示省略号用 text-overflow:ellipsis 属性来，当然还需要加宽度width属来兼容部分浏览。

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

直接看代码吧：

<!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>