《文本溢出截断省略》方案合集
2020-01-03 本文已影响0人
imakan
本文首发于政采云前端团队博客：可能是最全的 “文本溢出截断省略” 方案合集
单行文本溢出省略
核心CSS语句
overflow:hidden;
/*设置文字在一行，不换行*/
white-space:nowrap;
/*文本溢出时，显示省略符号来代表被修剪的文本*/
text-overflow:ellipsis;
-
优点
- 无兼容性问题
- 响应式截断
- 文本溢出范围才显示省略符号，否则不显示省略号
-
短板
- 只支持单行文本截断
适应场景
- 适用单行文本溢出省略号的情况
Demo
<style>
.demo{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<div class='demo'>这是一段很长很长的文本</div>
</body>
多行文本溢出省略
纯CSS实现方案
/*限制在一个块元素内显示的行数，2表示最多显示2行，为了实现该效果，他需要组合其他的webkit属性*/
-webkit-line-clamp:2;
/*和上面的结合使用，将对象作为弹性伸缩盒子模型显示*/
display:-webkit-box;
/*设置或检索伸缩盒子的子元素的排列方式*/
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis
- 优点
- 响应式截断
- 文本溢出范围才显示省略号，否则不显示省略号
- 省略号显示位置刚好
- 短板
- 兼容性一般：
-webkit-line-clamp属性只有webkit内核的浏览器才支持
- 兼容性一般：
WX20200103-175632@2x.png
适用场景
- 多适用于移动端页面 ，因为移动设备浏览器更多是基于
Webkit内核
<style>
display:-webkit-box;
overflow:hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
</style>
<body>
<div class='demo'>这是一段很长很长的文本</div>
</body>
基于Javascript的实现方案
-
优点
- 无兼容性问题
- 响应式截断
- 文本溢出范围才显示省略号，否则不显示省略号
-
短板
- 需要
JS实现，背离展示和行为相分离原则 - 文本为中英文混合时，省略号显示位置略有偏差
- 需要
适用场景
- 适用于响应式截断，多行文本溢出省略的情况
Demo
当前仅适用于文本为中文，若文本中有英文，可自行修改
<script type="text/javascript">
const text = '这是一段很长的文本';
const totalTextLen = text.length;
const formatStr = () => {
const ele = document.getElementsByClassName('demo')[0];
const lineNum = 2;
const baseWidth = window.getComputedStyle(ele).width;
const baseFontSize = window.getComputedStyle(ele).fontSize;
const lineWidth = +baseWidth.slice(0, -2);
// 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));
let content = '';
// 多行可容纳总字数
const totalStrNum = Math.floor(strNum * lineNum);
const lastIndex = totalStrNum - totalTextLen;
if (totalTextLen > totalStrNum) {
content = text.slice(0, lastIndex - 3).concat('...');
} else {
content = text;
}
ele.innerHTML = content;
}
formatStr();
window.onresize = () => {
formatStr();
};
</script>
<body>
<div class='demo'></div>
</body>
多行文本溢出省略（按照高度）
-
多行文本溢出不显示省略号
- 核心
CSS语句
- 核心
overflow:hidden;
line-height:20px;
max-height:40px;
-
优点
- 无兼容性问题
- 响应式截断
-
短板
- 单纯截断文字，不展示省略号，观感上较为生硬
使用场景
- 适用于文本溢出不需要省略号的情况
<style>
.demo {
overflow: hidden;
max-height: 40px;
line-height: 20px;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
伪元素 + 定位实现多行省略
-
核心
css语句- position: relative; （为伪元素绝对定位）
- overflow: hidden; （文本溢出限定的宽度就隐藏内容）
- position: absolute;（给省略号绝对定位）
- line-height: 20px; （结合元素高度,高度固定的情况下,设定行高, 控制显示行数）
- height: 40px; （设定当前元素高度）
- ::after {} （设置省略号样式）
- 优点
- 无兼容性问题
- 响应式截断
- 短板
- 无法识别文字的长短，无论文本是否溢出范围，一直显示省略号
- 省略号显示可能不会刚刚好，有时会遮住一半文字
适用场景
- 适用于对省略号效果要求较低，文本一定会溢出元素的情况
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
利用 Float 特性，纯 CSS 实现多行省略
-
核心
CSS语句- ine-height: 20px；（结合元素高度,高度固定的情况下,设定行高, 控制显示行数）
- overflow: hidden；（文本溢出限定的宽度就隐藏内容）
- float: right/left；（利用元素浮动的特性实现）
- position: relative；（根据自身位置移动省略号位置, 实现文本溢出显示省略号效果）
- word-break: break-all；（使一个单词能够在换行时进行拆分）
-
优点
- 无兼容问题
- 响应式截断
- 文本溢出范围才显示省略号，否则不显示省略号
-
短板
- 省略号显示可能不会刚刚好，有时会遮住一半文字
适用场景
+ 适用于对省略效果要求较低，多行文本响应式截断的情况
<style>
.demo {
background: #099;
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%);
}
</style>
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
