文本溢出截断省略
时间:2022-07-24
本文章向大家介绍文本溢出截断省略,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文本溢出截断省略
文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。
单行溢出省略
单行文本溢出截断省略直接使用CSS
即可,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是只能作为单行文本溢出截断省略的解决方案。
<section>
<div class="t1">很长很长很长很长很长很长很长很长的文本</div>
<div class="t1">不很长的文本</div>
</section>
<style type="text/css">
.t1{
white-space: nowrap; /* 文字在一行显示不能换行 */
overflow: hidden; /* 文字长度超出限定宽度则截断 */
text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
}
</style>
多行溢出省略
按行计算 CSS方案
多行文本溢出截断省略按行计算使用CSS
,其文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是兼容性一般,line-clamp
属性只有WebKit
内核的浏览器才支持,多适用于移动端页面,因为移动设备浏览器更多是基于WebKit
内核。
<section>
<div class="t2">不很长的文本</div>
<div class="t2">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<style type="text/css">
.t2{
-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 兼容性 https://caniuse.com/#search=line-clamp */
display: -webkit-box; /* 显示为弹性伸缩盒子模型 */
box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
overflow: hidden; /* 文字长度超出限定宽度则截断 */
text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
}
</style>
按行计算 Js方案
多行文本溢出截断省略按行计算使用Js
,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,但是需要Js
实现,背离展示和行为相分离原则,文本为中英文混合时,省略号显示位置略有偏差。
<section>
<div class="t3">不很长的文本</div>
<div class="t3">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<script type="text/javascript">
(function(){
var lineNum = 3;
var elements = document.getElementsByClassName("t3");
Array.prototype.forEach.call(elements, element => {
var text = element.innerText;
var textLen = text.length;
var baseWidth = window.getComputedStyle(element).width;
var fontsize = window.getComputedStyle(element).fontSize;
var lineWidth = baseWidth.slice(0, -2);
var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 计算一行内可容纳字数
var content = "";
var totalStrNum = Math.floor(charCount * lineNum); // 多行可容纳总字数
var lastIndex = totalStrNum - textLen;
if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat('...');
else content = text;
element.innerText = content;
})
})();
</script>
按高度计算 CSS方案
多行文本溢出截断省略按高度计算使用CSS
,利用Float
的浮动,通过::before
与::after
两个伪元素实现浮动操作,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,但省略号显示可能不会刚刚好,有时会遮住一半文字。
<section>
<div class="t4">
<div class="text">不很长的文本</div>
</div>
<div class="t4">
<div class="text">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</div>
</section>
<style type="text/css">
.t4 {
max-height: 40px;
line-height: 20px;
overflow: hidden;
}
.t4::before{
float: left;
content:"";
width: 20px;
height: 40px;
}
.t4 .text {
float: right;
width: 100%;
margin-left: -20px;
word-break: break-all;
}
.t4::after{
float:right;
background-color: #fff;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
}
</style>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>文本溢出截断省略</title>
<style type="text/css">
#container{
width: 300px;
border: 1px solid #eee;
position: relative;
}
section{
padding: 5px 0;
margin: 5px;
border-bottom: 1px solid #eee;
}
.t1{
white-space: nowrap; /* 文字在一行显示不能换行 */
overflow: hidden; /* 文字长度超出限定宽度则截断 */
text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
}
.t2{
-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
display: -webkit-box; /* 显示为弹性伸缩盒子模型 */
-webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
overflow: hidden; /* 文字长度超出限定宽度则截断 */
text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
}
.t4 {
max-height: 40px;
line-height: 20px;
overflow: hidden;
}
.t4::before{
float: left;
content:"";
width: 20px;
height: 40px;
}
.t4 .text {
float: right;
width: 100%;
margin-left: -20px;
word-break: break-all;
}
.t4::after{
float:right;
background-color: #fff;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
}
</style>
</head>
<body>
<div id="container">
<section>
<div class="t1">不很长的文本</div>
<div class="t1">很长很长很长很长很长很长很长很长的文本</div>
</section>
<section>
<div class="t2">不很长的文本</div>
<div class="t2">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<section>
<div class="t3">不很长的文本</div>
<div class="t3">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<section>
<div class="t4">
<div class="text">不很长的文本</div>
</div>
<div class="t4">
<div class="text">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</div>
</section>
</div>
</body>
<script type="text/javascript">
(function(){
var lineNum = 3;
var elements = document.getElementsByClassName("t3");
Array.prototype.forEach.call(elements, element => {
var text = element.innerText;
var textLen = text.length;
var baseWidth = window.getComputedStyle(element).width;
var fontsize = window.getComputedStyle(element).fontSize;
var lineWidth = baseWidth.slice(0, -2);
var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 计算一行内可容纳字数
var content = "";
var totalStrNum = Math.floor(charCount * lineNum); // 多行可容纳总字数
var lastIndex = totalStrNum - textLen;
if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat('...');
else content = text;
element.innerText = content;
})
})();
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jb51.net/css/718058.html
https://zhuanlan.zhihu.com/p/92576904
https://www.jianshu.com/p/391702bd5b6b
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- NuGet 使用自定义本地类库目录
- Flutter/Dart中的异步编程之Isolate
- System.Net.Http for Silverlight
- 在SAP WebClient UI里混用ABAP Webdynpro,会带来哪些问题?
- 设计模式之中介者模式
- SAP WebClient UI创建Value help最详细的步骤
- 设计模式之迭代器模式
- 跨平台开发框架 MvvmCross 初体验
- 设计模式之解释器模式
- 设计模式之命令模式
- 设计模式之职责链模式
- iOS 静态类库项目的创建与使用
- 使用ABAP创建QR Code(二维码)
- CocoaTouch 中的 NSString
- 在 iOS 项目中使用 ESRI ArcGIS SDK