CSS3超过宽度显示省略号...

       在写WEB前端代码时，有些CMS会能按照意愿控制字数多少，在自适应页面设置的时候就方便了，使用CSS样式

p.title{
 width:200px;
 height:60px;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

       第三句是文字超过了规定的宽度高度则隐藏，虽然对搜索引擎没什么影响，但对用户不友好，造成阅读障碍，影响点击。

       第四句text-overflow属性，规定当文本溢出包含元素时发生的事情。有三个属性

clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本

       上面案例会在超过限制宽度后显示省略号“...”，这个属性属于CSS3，主流浏览器都支持。IE低版本的就不支持了，如果想IE6/IE7/IE8支持CSS3，参考文章《IE6/IE7/IE8浏览器支持CSS3》

转载请注明来源网址：https://www.mubanyun.com/news/1328.html