CSS单行／多行文本溢出隐藏

已于 2023-07-19 16:04:40 修改
阅读量1.2w 收藏 8
点赞数 4
文章标签： css html css3
于 2023-01-03 16:19:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53225741/article/details/128535012
版权

前言

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

对于文本的溢出，我们可以分成两种形式：

  • 单行文本溢出
  • 多行文本溢出

实现

单行文本溢出省略

理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现

实现方式也很简单，涉及的css属性有：

  • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
  • white-space：设置文字在一行显示，不能换行
  • overflow：文字长度超出限定宽度，则隐藏超出的内容

overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础

text-overflow属性值有如下：

  • clip：当对象内文本溢出部分裁切掉
  • ellipsis：当对象内文本溢出时显示省略标记（…）

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

多行文本溢出省略

多行文本溢出的时候，我们可以分为两种情况：

  • 基于高度截断
  • 基于行数截断
基于高度截断
伪元素 + 定位

核心的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>

实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字

这种实现具有以下优点：

  • 兼容性好，对各大主流浏览器有好的支持
  • 响应式截断，根据不同宽度做出调整

一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分

基于行数截断

纯css实现也非常简单，核心的css代码如下：

  • -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
  • display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
  • -webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
  • overflow: hidden：文本溢出限定的宽度就隐藏内容
  • text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
<style> p {width: 400px;border-radius: 1px solid red;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} </style>
<p>这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >

可以看到，上述使用了webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器，由于移动端大多数是使用webkit，所以移动端常用该形式

需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性

最后

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供：


当然除了有配套的视频，同时也为大家整理了各种文档和书籍资料&工具，并且已经帮大家分好类了。

因篇幅有限，仅展示部分资料，有需要的小伙伴，可以【点下方卡片】免费领取：

前端码农小王
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现单行、多行文本溢出显示省略号（…）
07-26
CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
css单行/多行文本溢出隐藏 /超出隐藏，效果展示...
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
01-10 4130
css单行/多行文本溢出隐藏（补充CSS样式穿透 scoped 问题）
CSS|文本溢出隐藏效果（单行&&多行）
最新发布
weixin_51341999的博客
03-05 223
【代码】【无标题】
css溢出隐藏的五种方法
m0_74359467的博客
11-02 3807
单行文本溢出省略通常用于标题等文本显示，可以通过设置white-space和text-overflow属性实现。white-space属性：用来设置元素中的空白如何处理，默认值为normal，即会自动忽略多余的空格和换行符。当设为nowrap时，文本不会换行。text-overflow属性：用来控制溢出文本的显示方式，默认值为clip，即将溢出部分截去。当设置为ellipsis时，会显示省略号。
CSS单行、多行文本溢出隐藏
yigexiaobai123的博客
10-04 5445
CSS单行、多行文本溢出隐藏 1.单行文本溢出隐藏 .class{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 在这里需要注意的是overflow只能作用于块级元素身上，如果我们对内联元素进行如上操作将不会产生预期的效果。解决方法是加上下面这行代码： display：block 2.多行文本溢出隐藏 .class{ overflow: hidden; text-overflow: ellipsis;
前端css文本超出隐藏或显示省略号的多种方式
m0_57634698的博客
01-25 2156
前端css文本超出隐藏或显示省略号的多种方式
五种css溢出隐藏的方法----亲测可用
一个努力不被优化的程序员
09-06 5303
以上就是CSS实现文本溢出和多行省略的方法，对于不同的需求可以根据实际情况选择不同的实现方式。在实际开发中，我们需要根据不同的浏览器的兼容性来使用相应的CSS前缀以及注意不同属性之间的兼容性。
CSS|文本溢出隐藏
m0_72383454的博客
07-15 1万+
介绍单行文本和多行文本文本溢出时如何隐藏
关于overflow：hidden溢出隐藏
weixin_45392189的博客
10-12 6078
一. overflow:hidden溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度，那么超出的部分将会被隐藏，不占据位置。 效果如下* 一般情况下，在页面中，一般溢出后会显示省略号，例如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。 效果如下* 二. overflow:hidden解决外边距塌陷 父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距...
css超出隐藏
热门推荐
时漂亮的博客
02-19 2万+
1.单行超出隐藏 div { overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //用省略号显示 white-space:nowrap; //不换行 } 2.多行超出隐藏 div{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 从上
CSS设置多行文本垂直居中的方法
09-25
单行文本居中比较简单，就是将line-height设置成和height一样就可以了，对于多行文本，这种方式就行不通了，使用width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性即可实现
css多行文本溢出时出现省略号的示例
09-24
主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS实现单行、多行文本溢出显示省略号的实现方法
09-22
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览
BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1
07-25
实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未
CSS实现单行、多行文本溢出显示省略号的实现方法.pdf
11-26
...
CSS实现单行、多行文本溢出显示省略号的实现方法.docx
11-26
...
如何优雅解决单行溢出隐藏和多行溢出隐藏
tianbushengyinuo的博客
08-27 2293
1、单行溢出隐藏： overflow: hidden; text-overflow: ellipsis;//多出部分以省略号形式隐藏 white-space: nowrap;/* 禁止换行 normal可以换行 */ text-overflow: ellipsis; 多出部分以省略号形式隐藏，还可以有其他形式隐藏，如clip，自定义string，可参考溢出隐藏 2、多行溢出隐藏： display: -webkit-box; word-break: break-all; -webkit
【CSS/JS】如何实现单行／多行文本溢出的省略（...）
05-27
好的，既然您想了解如何实现单行和多行文本溢出的省略，我将同时为您提供 CSS 和 JavaScript 两种方法。 ## CSS 实现 ### 单行文本溢出的省略 可以使用 CSS 的 `text-overflow` 属性来实现单行文本溢出的省略，代码如下： ```css .ellipsis { width: 150px; /* 元素宽度 */ white-space: nowrap; /* 强制在一行内显示 */ overflow: hidden; /* 隐藏溢出的部分 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 将需要进行省略的元素添加 `.ellipsis` 样式即可。 ### 多行文本溢出的省略 可以使用 CSS 的 `display`、`-webkit-box`、`-webkit-line-clamp` 和 `-webkit-box-orient` 属性来实现多行文本溢出的省略，代码如下： ```css .ellipsis { display: -webkit-box; /* 将元素设置为块级容器 */ -webkit-box-orient: vertical; /* 设置文本在垂直方向上排列 */ -webkit-line-clamp: 2; /* 设置最多显示两行文本 */ overflow: hidden; /* 隐藏溢出的部分 */ } ``` 将需要进行省略的元素添加 `.ellipsis` 样式即可。 需要注意的是，`-webkit-line-clamp` 是 WebKit 浏览器引擎私有属性，其他浏览器可能不支持。 ## JavaScript 实现 ### 单行文本溢出的省略 可以通过获取元素的宽度和文本的宽度，比较它们的大小来判断是否需要省略。代码如下： ```javascript function ellipsisText(selector) { const elements = document.querySelectorAll(selector); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const style = window.getComputedStyle(element); const elementWidth = element.clientWidth; const textWidth = element.scrollWidth; const ellipsis = '...'; if (textWidth > elementWidth) { const text = element.textContent; const textLength = text.length; let i = textLength; while (i > 0 && (textWidth + ellipsis.length) > elementWidth) { i--; element.textContent = text.slice(0, i); textWidth = element.scrollWidth; } element.textContent = element.textContent + ellipsis; } } } ``` 这里的 `selector` 是需要进行省略的元素的选择器。将需要进行省略的元素传入该函数即可。 ### 多行文本溢出的省略 使用 JavaScript 实现多行文本溢出的省略比较麻烦，需要先获取元素的行高，再计算需要显示的行数，最后根据行数和文本内容进行裁剪和添加省略号。代码如下： ```javascript function ellipsisText(selector, lineCount) { const elements = document.querySelectorAll(selector); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10); const height = lineHeight * lineCount; const text = element.textContent; const textLength = text.length; let i = textLength; while (element.clientHeight > height && i > 0) { i--; element.textContent = text.slice(0, i); } if (i < textLength) { element.textContent = element.textContent.slice(0, i - 3) + '...'; } } } ``` 这里的 `selector` 是需要进行省略的元素的选择器，`lineCount` 是需要显示的行数。将需要进行省略的元素和行数传入该函数即可。 需要注意的是，该方法只适用于行高固定的情况下，如果行高不固定，最好还是使用 CSS 来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值