欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS文本溢出时以省略号的形式显示

程序员文章站 2022-03-29 08:41:52
单行溢出单行溢出,超出部分以省略号(…)的形式显示。前提必须有宽度。实例代码:HTML:CSS:效果图:样式说明:参数说明overflow:hidden文本溢出隐藏text-overflow: ellipsis以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本white-space:nowrap禁止文本自动换行。多行溢出多行溢出,超出部分以省略号(…)的形式显示。WebKit内核适用于移动端。实例代码:HTML:CSS:效果...

单行溢出

单行溢出,超出部分以省略号(…)的形式显示。前提必须有宽度。

实例代码:

HTML:
CSS文本溢出时以省略号的形式显示

CSS:
CSS文本溢出时以省略号的形式显示

效果图:
CSS文本溢出时以省略号的形式显示

样式说明:

参数 说明
overflow:hidden 文本溢出隐藏
text-overflow: ellipsis 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本
white-space:nowrap 禁止文本自动换行。

多行溢出

多行溢出,超出部分以省略号(…)的形式显示。WebKit内核适用于移动端。

实例代码:

HTML:
CSS文本溢出时以省略号的形式显示

CSS:
CSS文本溢出时以省略号的形式显示

效果图:
CSS文本溢出时以省略号的形式显示
样式说明:

参数 说明
display: -webkit-box 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property)
overflow:hidden 文本溢出隐藏
text-overflow: ellipsis 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本

本文地址:https://blog.csdn.net/swx999/article/details/107682433

相关标签: CSS