当前位置 : 主页 > 网站建设 > 正文

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

原创

重庆seo2017-11-14 13:57:30阅读()CSSA+ / A-

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.vi586.com/web/478.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处

    赞(79)