day06

最新推荐文章于 2024-10-13 19:30:05 发布

ZOYA.

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量50

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_76796731/article/details/129843807

版权

本文介绍了CSS中处理文本溢出的几种方法，包括使用overflow属性隐藏超出内容，以及如何实现单行和多行文本超出后显示省略号的效果。对于单行文本，可以通过设定宽度、禁止换行和应用text-overflow:ellipsis实现。对于多行文本，利用-webkit-line-clamp和-webkit-box等WebKit扩展属性可以创建多行省略号效果，但需要注意其兼容性和特定的使用条件。

摘要由CSDN通过智能技术生成

1.溢出属性（超出部分如何显示）

2.单行文本超出省略号显示

3.实现多行文本溢出时产生省略号

1.溢出属性（超出部分如何显示）

overflow:

visible 默认值（没有特殊含义）
hidden------超出部分隐藏（万能解决方法）
scroll-----股懂条显示（没有超出部分也显示滚动条）
auto------超出部分用滚动条显示
inherit-------继承父级的属性

overflow-x:visible|hidden|scroll|auto|inherit

overflow-y:visible|hidden|scroll|auto|inherit

2.单行文本超出省略号显示

步骤：

width:300px;--------------限定宽度
white-space: nowrap;------剩余的内容不换行
overflow: hidden;---------超出内容隐藏
text-overflow: ellipsis;-----超出内容用省略号显示

3.实现多行文本溢出时产生省略号

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

2、display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；但文字未超出行的情况下也会出现省略号,可结合js优化该方法

注意点：使用该方法时盒子不写高度，不然省略号后面如果高度足够的话还会显示文本内容