前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

css文字溢出隐藏显示点(省略号)

2017-03-23 16:32:54分类:HTML/CSS阅读(45)

通常网页中防止文本超出某一区域是通过程序控制的,用程序限制文字字数以防止文本超出显示区域。但是当文本内容包含中文、英文的情况下,文字的显示长度是不固定的,所以即使限制字数,一样存在文本超出显示区域的可能。

其实更稳妥的方法是使用css美化文字溢出效果,今天我们来看看如何使用css隐藏溢出文字并显示省略号

单行文字溢出显示省略号css代码:

width:300px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

上述代码

  • width:300px; 限制宽度
  • overflow:hidden; 溢出内容隐藏
  • text-overflow:ellipsis; 显示省略符号来代表被修剪的文本
  • white-space:nowrap; 文本不换行

 

原文链接:http://www.hqhtml.com/htmlcss/21.html,出自好切网(前端学堂),转载请注明出处。
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号