文本溢出省略号显示css+js(全)

1.0 单行文本溢出（页面中多余的文本仍然存在 只是显示的时候用户的角度溢出的部分文本是省略号代替的）

这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本

image.png

2.0 多行文本溢出 (按行数)

1. 纯Css 实现（页面中多余的文本仍然存在 只是显示的时候用户的角度溢出的部分文本是省略号代替的）

• -webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）;
• display: -webkit-box；（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）；
• webkit-box-orient: vertical；（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）；
• overflow: hidden；（文本溢出限定的宽度就隐藏内容）；
• text-overflow: ellipsis；（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)；

    
这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本

image.png

2.js 实现 ；（页面中多余的文本已经不存在 多余的文本截掉用省略号代替）

image.png

3. 多行文本溢出（按高度）
   1 溢出隐藏 没有省略号 ;（页面中多余的文本仍然存在 只是给隐藏了用户看不到）

image.png

2 伪元素+定位实现多行省略
适用场景 ： 适用于对省略效果要求较低，文本 一定会溢出元素的 情况；
缺点 :
-无法识别文字的长度，无论文本是否溢出 都会显示省略号 ;
-省略号显示可能不会刚刚好，有时会遮住一半文字

这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本

3 利用float 纯css 实现多行文本溢出省略

这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本

image.png

缺点 : '...' 位置不准确 会存在误差