1.0 单行文本溢出（页面中多余的文本仍然存在 只是显示的时候用户的角度溢出的部分文本是省略号代替的）
<style>
.text{
width : 500px;
height: 50px;
line-height : 50px;
/* 单行文本溢出的省略号的关键性代码*/
over-flow :hidden;
white-space : nowrap ;
text-overflow :ellipsis ;
}
</style>
<body>
<p class="text">这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本</p>
</body>
image.png
2.0 多行文本溢出 (按行数)
- 纯Css 实现（页面中多余的文本仍然存在 只是显示的时候用户的角度溢出的部分文本是省略号代替的）
- -webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）;
- display: -webkit-box；（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）；
- webkit-box-orient: vertical；（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）；
- overflow: hidden；（文本溢出限定的宽度就隐藏内容）；
- text-overflow: ellipsis；（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)；
<style>
.demo{
width:500px;
/* 不要设置高度高度会由内容撑开 */
-webkit-line-clamp: 3;
display: -webkit-box;
/*不设置高度 这个属性不要忘记设置哦 不然...不生效*/
-webkit-box-orient: vertical;
overflow: hidden;
/*text-overflow: ellipsis 可以不用设置 其他几个属性必须设置*/
/*text-overflow: ellipsis; */
}
</style>
<body>
<p class="demo">这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本</p>
</body>
image.png
2.js 实现 ；（页面中多余的文本已经不存在 多余的文本截掉用省略号代替）
<style>
#demo{
width: 100%;
font-size : 20px;
}
</style>
<body>
<div id="demo"></div>
<script>
const ele = document.getElementById("demo") ;
const text = ''这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本；''
const totalNum = text.length ; //----> 文本的个数
formartStr =()=>{
const lineNum = 2 ; // ----> 行数
const lineWidth = window.getComputedStyle(ele,null).width ; //-----> 行宽
const fontSizeWidth = window.getComputedStyle(ele,null).fontSize ； // ----> 字体的大小
const num = Math.floor( lineWidth.slice(0,-2)/fontSizeWidth.slice(0,-2 )) ; //----> 一行可以显示多少个字符（纯文本 若不是纯文本会存在误差）
const strNum = num*lineNum；
const lastIndex = strNum - totalNum ; //--->可以理解为 需要截掉的字符的个数
let content = '' ;
if(totalNum > strNum){
content = text.slice(0,lastIndex-3).concat('...')
}else {
content = text ;
}
ele.innerText = content ;
}
formatStr()
window.onresize =()=>{
formatStr()
}
</script>
</body>
</style>
image.png
- 多行文本溢出（按高度）
1 溢出隐藏 没有省略号 ;（页面中多余的文本仍然存在 只是给隐藏了用户看不到）
<style>
#demo{
height :40px;
/*结合元素高度,高度固定的情况下,设定行高, 控制显示行数*/
line-height : 20px;
overflow:hidden ；
/* 只显示两行 多余的内容隐藏*/
}
</style>
<body>
<div id="demo"></div>
<script>
document.getElementById('demo').innerText = '这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本'
</script>
</body>
image.png
2 伪元素+定位实现多行省略
适用场景 ： 适用于对省略效果要求较低，文本一定会溢出元素的 情况；
缺点 :
-无法识别文字的长度，无论文本是否溢出 都会显示省略号 ;
-省略号显示可能不会刚刚好，有时会遮住一半文字
<style>
.text{
height: 40px;
/*结合元素高度,高度固定的情况下,设定行高, 控制显示行数*/
line-height : 20px;
over-flow :hidden;
/* 父元素设置相对定位*/
position :relative ;
}
.text::after {
/* 伪元素设置绝对定位*/
position :absolute ;
bottom: 0;
right: 0;
content:"..."
padding: 0 20px 0 10px;
}
</style>
<body>
<p class="text">这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本</p>
</body>
3 利用float 纯css 实现多行文本溢出省略
<style>
.demo{
max-height:40px;
line-height:20px;
overflow:hidden ;
}
.demo::before{
float : left ;
content : '';
width:20px;
height :40px;
}
.demo .text{
float : right ;
width :100% ;
margin-left:-20px;
word-break: break-all;
}
.demo::after{
float:right;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
/* 伪元素从右往左背景 作用虚化文本中的最后一个字让省略号突出显示 原文章中未添加 */
background:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,.8));
}
</style>
<body>
<p class="demo"><span class="text">这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本这是一段很长的测试文本</span></p>
</body>
image.png
缺点 : '...' 位置不准确 会存在误差
网友评论