CSS--文本溢出的处理

最新推荐文章于 2024-08-23 11:10:08 发布

Qian_mos

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签：多行文本溢出兼容处理

本文链接：https://blog.csdn.net/Qian_mos/article/details/85231319

版权

本文介绍了CSS中处理文本溢出的方法，包括单行文本溢出的兼容处理，多行文本溢出在webkit浏览器及移动端的实现，以及针对不同浏览器的兼容方案。在兼容方案中，详细说明了如何设置高度、使用伪元素模拟省略号，并讨论了在IE浏览器中的兼容性问题以及使用JS进行动态判断和处理的可能性。

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

1.单行文本溢出
单行文本溢出一般没有代码上的兼容问题，
//需要对元素盒子设置一个宽度以兼容部分浏览器
overflow: hidden; //超出部分隐藏
white-space: nowrap; //表示不换行
text-overflow: ellipsis; //加省略号

2.多行文本溢出
适用于webkit浏览器（如chrome、QQ极速、搜狗等）和移动端。

display: -webkit-box; //必须有，对象作为弹性伸缩盒子模型显示
overflow:hidden;
text-overflow: elipsis;
word-break: break-all;
-webkit-box-orient:vertical; //伸缩盒子子元素的排列方式
-webkit-line-clamp: 2 //数字表示是文本行数，如3，表示第三行会出现省略号，限制一个块内显示的文本行数

3.跨浏览器的兼容方案
将相对定位的容器设置高度，同时用包含省略号的元素模拟实现.—多浏览器兼容

p {
   
   position: relative; /* 设置相对定位*/
   width: 100px;
   line-height: 1.4em;
   height: 4.2em;/*高度设置为line-height的三倍 */
   overflow: hidden;
}
p::after {
   
    content:"..."; /*包含省略号的元素*/
    position: absolute;
    /*表示在右下的位置*/
    bottom: 0;