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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》:本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo