如何利用CSS给单行或多行文本截取并添加省略号

最新推荐文章于 2024-04-17 01:32:59 发布
最新推荐文章于 2024-04-17 01:32:59 发布
阅读量190 收藏
点赞数
分类专栏： Layui # table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ocaiwen/article/details/105339239
版权
本文介绍了如何使用CSS来实现单行和多行文本的截取，并在超出部分添加省略号。内容包括针对普通文本和嵌套在表格中的文本的截取方法。
摘要由CSDN通过智能技术生成

没有表格元素的截取：

.clamp1, .clamp2, .clamp3 {
   
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.clamp1 {
   
	-webkit-line-clamp: 1;
}
.clamp2 {
最低0.47元/天 解锁文章
oCaiWen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多行文本截断并出现省略号 纯CSS解决方案
ajhongshaorou的博客
04-18 7271
2016/4/18ps:博主上班半个月啦 一直在忙 万事开头难。。 前几天碰到一个CSS的问题 多行文本的截断 还不能使用JS来做 找了又找 终于发现国外有个非常好的想法来跟大家分享一下，具体网站忘记了。。。如果有记得的 发给我一下 ，毕竟是人家的创意。。。 如下图： 大家都知道，text-overflow是实现单行文本溢出隐藏的方式 overflow: hidden;/*溢出隐藏*/
用css截取字符，并加省略号
北极光的博客
09-10 501
本人对css不是了解太多，只会些基本操作，今天在群里看到一个css的用法，挺不错的，能直接截取标题的字符，并自动将截取后的标题加上省略号，这个方法比较省事，记录下来： width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;     这样，不论标题有多长，都会自
纯css实现单行”截取“
weixin_34177064的博客
10-15 92
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &am
CSS截取字符串,多余文字省略号显示
09-14 112
<style type="text/css"> body{ font-family:Arial, Helvetica, sans-serif; /* 字体种类*/ font-size:12px;/*字体大小*/ } div{ width:200px; /*容器宽度*/ height:24px;/*高度*/ line-height:24px;/*行...
css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
03-16 999
box{我们可以看到，文本根据边框的宽度，自动换行，并且全部显示.box{使文本内容不换行，写在一行.box{使文本内容不换行，写在一行隐藏多余内容.box{
纯 CSS 实现多行文字截断功能
09-27
这将截断显示为两行的文本，并在超出时添加省略号。这种方法的优点在于响应式截断，可以根据容器宽度自动调整，且省略号位置正确。然而，由于 `-webkit-line-clamp` 是 WebKit 特有的，因此只在基于 WebKit 的浏览器...
jquery字数超出规定字数自动生成截取生成省略号
01-28
有时，我们可能还需要结合 CSS 来控制被截断文本的样式，比如设置 `overflow: hidden` 和 `text-overflow: ellipsis` 来让浏览器自动处理超出部分的省略号，但这通常只适用于单行文本，对于多行文本的截取，...
CSS实现标题文字过长部分显示省略号的方法
01-19
前段时间在公司移动站的重构，遇到了一个产品列表title的需求是只显示两行，然后超过两行的字符用省略号显示。如下图的效果，当时第一感觉是这个需求只能通过后台输出的时候截取字符去处理，或者通过JS计算字符来...
文本换行-截断CSS
01-23
单行文本截断的优点是简单易用、浏览器兼容性好，但缺点是只支持单行文本截断，不支持多行文本截取。 多行文本截断 多行文本截断是指对多行文本进行截断和换行处理，通常使用 `-webkit-line-clamp` 属性或定位元素...
js实现文字超出部分用省略号代替实例代码
10-21
在页面加载完成后，`window.onload`事件触发，获取id为`cut_str`的`<p>`元素的文本内容，调用`cutString`函数进行截断，并将结果替换回`<p>`元素的文本内容，从而实现了多行文本的省略号截断效果。 这个示例的核心...
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，不过我们经常在文本溢出中使用这个参数
CSS截取字符串显示省略号
weixin_34050519的博客
03-02 99
2019独角兽企业重金招聘Python工程师标准>>> ...
css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容(1)
最新发布
m0_63102527的博客
04-17 400
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
单行截断css
MCCLS的博客
02-07 277
单行截断css
Css实现单行文本、多行文本、截断
曲小强
11-06 9840
一、单行文本截断 text-overflow 文本溢出经常用到的应该就是 text-overflow:ellipsis 了，只需轻松几行代码就可以实现单行文本截断。 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 二、-webkit-line-clamp 实现 div { /......
11、多行文本最后一行显示省略号并截取文本字数（vue）
weixin_30363817的博客
06-27 362
1.首先通过css实现多行文本显示省略号： { height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 发现最后一行会占满一行，不是想要的效果： 为实现最后一行不占满，...
CSS 实现单行、多行文本溢出显示省略号（…）
VirgoYellow 的专栏
08-09 2800
1、单行文本溢出显示省略号 直接用 css 属性 text-overflow: ellipsis; 设置： { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本溢出显示省略号 直接用 css 属性 -webkit-line-clamp: n; （n是需要展示的行数）设置： { overflow: hidden; text-overflow: ellipsis.
文本超出截取（单行/多行）
weixin_45162984的博客
04-09 196
文本超出隐藏（单行/多行）单行隐藏多行隐藏-webkit-line-clamp说明 单行隐藏 width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行隐藏 width: 100px; overflow: hidden; display: -webkit-box; -webkit-box-ori...
css 实现标签内容多行截取（...）
Sophiego的博客
04-13 3043
css实现单行截取字符串比较简单，css属性：overflow:hidden;white-space:nowrap;想要实现多行截取，经过百度得到，取两行然后截取的属性；overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient;vertical;o 解决问题；...
css实现单行和多行文本溢出显示省略号问
08-23
可以使用CSS的text-overflow属性来实现单行和多行文本的溢出显示省略号。 对于单行文本溢出显示省略号，可以使用以下样式： ```css .single-line { white-space: nowrap; /* 让文本不换行 */ overflow: hidden; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值