CSS文本溢出截断省略

2024-06-23 19:04

本文主要是介绍CSS文本溢出截断省略,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文本溢出截断省略

文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。

单行溢出省略

单行文本溢出截断省略直接使用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

这篇关于CSS文本溢出截断省略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1088008

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

使用Python实现文本转语音(TTS)并播放音频

《使用Python实现文本转语音(TTS)并播放音频》在开发涉及语音交互或需要语音提示的应用时,文本转语音(TTS)技术是一个非常实用的工具,下面我们来看看如何使用gTTS和playsound库将文本... 目录什么是 gTTS 和 playsound安装依赖库实现步骤 1. 导入库2. 定义文本和语言 3

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分