css:文字超长后显示为 "..."

给定宽度(即块级元素)的标签,内容过多时会自动换行显示

内容过多时自动换行

怎样才能单行显示呢?
在标签上添加以下代码即可解决:

white-space: nowrap;

没有换行,但是给定宽度的文字超长后溢出

单行文本中,给定宽度的文字超长后会溢出
在标签上添加以下代码即可解决:

overflow: hidden;
text-overflow: ellipsis;

此时,需要显示单行内容的标签中超出的文字就会显示成 “...” 了。

单行文字超长后显示成 ...

弊端:只能显示单行文字。


#思考:如果需求是显示多行文字呢?文字过多怎么办?

在标签上添加以下代码即可解决:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*下面三条缺一不可 可以生成 '...' 主要针对谷歌浏览器 */
-webkit-line-clamp: 2;//表示行数
-webkit-box-orient: vertical;//表示纵向

此时,指定行数后的多余文字就替换成“...” 了。

第二行文字后都替换成 ... 了 ؏؏☝ᖗ乛◡乛ᖘ☝؏؏

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,342评论 2 66
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,318评论 0 5
  • linux资料总章2.1 1.0写的不好抱歉 但是2.0已经改了很多 但是错误还是无法避免 以后资料会慢慢更新 大...
    数据革命阅读 12,237评论 2 33
  • 今天上了一天课,累却充实着,最难忘的是老师放的一个短片,内心感动,无比振憾。 站在人生的十字路口,扪心自问,我还有...
    般若秋雪阅读 1,973评论 0 2