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》