当前位置： 移动技术网 > IT编程>网页制作>HTML > CSS文本溢出时以省略号的形式显示

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

2020年08月01日  | 移动技术网IT编程  | 我要评论

单行溢出

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

实例代码：

HTML：
在这里插入图片描述

CSS:
在这里插入图片描述

效果图：
在这里插入图片描述

样式说明：

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

多行溢出

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

实例代码：

HTML：
在这里插入图片描述

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网