div css 多行文本 最后一行自动显示省略号

最新推荐文章于 2023-12-20 16:32:42 发布
原创 最新推荐文章于 2023-12-20 16:32:42 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用CSS实现文本溢出时显示省略号的效果，特别针对多行文本的处理方式。通过-webkit-line-clamp属性可以限制在一个块元素显示的文本的行数，并且当超出指定行数时使用省略号来隐藏多余的文本。

div{display: -webkit-box;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

-webkit-line-clamp: 3;这个设置为显示3行，超过3行则最后用省略号代替，目前在移动设备上使用正常。pc上貌似也可以

多行文本溢出最后一行显示省略号
lh_guojw的博客
07-06 3693
现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？ 1、-webkit-line-clamp  Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个 WebKit-Specific Unsupported Property，也就是说这个
封装超出行数...隐藏，展开保留换行
wang_fu_gui_ya的博客
09-26 428
【代码】封装超出行数...隐藏，展开保留换行。
CSS实现单行、多行文本溢出显示省略号的实现方法
09-22
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览
div内多行文字， 溢出部分用省略号显示
weixin_39277183的博客
10-18 479
div内多行文字， 溢出部分用省略号显示 //单行 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; //多行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;/显示几行/ overflow: hidden; ​ 刚...
单行 or 多行div 内容溢出 显示省略号
Joker Card
03-13 399
/* 单行文字末尾省略号显示 */ .div1{ height: 100px; width:100px; background:green; text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪...
通过纯CSS样式实现DIV元素中多行文本超长自动省略号
12-13
在CSS中，实现一个DIV元素内多行文本超长时自动截断并显示省略号的效果，是一项常见的需求。这通常用于保持布局整洁，尤其是在有限的空间内展示大量文本的情况。以下是一个详细介绍如何通过纯CSS来完成这一任务的...
css多行显示省略号同时将最后一行只显示一半，查看全文效果
宋承佑
12-17 5804
纯CSS就可以做出来，不需要通过后端来截取返回带有"..."的效果。 实现的效果图： 实现的代码： <p class="content"> 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用tex
纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
c11073138的博客
09-28 5161
1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; white-space: nowrap; overflow: hidden...
CSS控制文本的长度 超过一行显示省略号的实现方法
09-24
2. `height`: 用来设置元素的高度，虽然在实现单行文本省略号时高度通常不那么关键，但在这里我们设定为20px以确保文本只在一行内显示。 3. `text-overflow: ellipsis;`: 这个属性告诉浏览器当内容溢出元素边界时，...
CSS+div 控制多行文本的显示，多余的以省略号显示
dh2014211103的博客
12-12 348
Docu <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .comment_inner{ ...
多个文字省略显示省略号（单行和多行）
MR.杜的博客
05-14 307
一、单行省略： <div class="positionInfo">中国北京海淀区北京大学计算机与信息工程</div> .positionInfo{ width:200px //限制宽度,根据实际开发需求设置 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 显示：中国北京海淀区北京大.... 二、多行省略 <div class="positionIn..
CSS-实现div内文字显示两行，超出两行部分省略号显示
weixin_45558196的博客
06-21 2579
在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。 /* 用的是-webkit-私有属性。 */ div{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ...
通过css实现div中文本内容显示N行，超过部分用省略号显示。
路漫漫其修远兮
07-09 3848
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示N行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box...
设置单行或多行溢出的文字省略号显示
m0_74001959的博客
12-20 2055
在日常开发过程中，我们有时希望做出像这样单行文本溢出显示省略号，或多行文本溢出显示省略号，这对我们的网页有明显的美化，如何做出这样的效果呢？一、单行文本溢出显示省略号；二、多行文本溢出显示省略号。本文介绍了溢出的文字省略号显示的方法，一定要注意多行文本溢出显示省略号的兼容性问题，在开发中，这种溢出的文字省略号显示会经常使用到，希望大家能够熟练掌握。
css 实现div内显示两行或三行，超出部分用省略号显示
如果我年少有为不自卑
11-23 5232
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;（...
div限制字数，超出部分用省略号表示（一行或者多行）
热门推荐
曹曹的博客
05-03 1万+
1.如果想要在一行里实现“超出长度显示省略号” 只需要加上简单的css样式即可： {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 注意：这里实现的是“超出长度”，而不是“超出字数”，并且在一行里实现。 2.如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。 则需要用用js判断字数截取。...
div内文字的溢出部分用省略号...显示
08-12 6870
单行 <div style=" width: 200px; overflow: hidden; border: 1px solid white; text-overflow: ellipsis; white-space: nowrap; " > 啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿
div内文字的溢出部分用省略号显示
小柠檬爱编程
06-05 7915
一：通过CSS控制显示 div内显示一行，超出部分用省略号显示 div内显示多行，超出部分用省略号显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <style> /* 单行文字末尾省略号显示 */ .div1{
css 多行文本 最后一行尾部缩进
最新发布
07-10
在 CSS 中实现多行文本排版时，对最后一行的尾部进行缩进处理，可以通过 `text-indent` 属性结合其他文本布局属性来实现。`text-indent` 通常用于控制首行文本的缩进，但若希望影响到最后一行的尾部缩略或排版，需要结合 `text-overflow`、`display: -webkit-box` 和 `-webkit-line-clamp` 等属性以实现更复杂的文本截断与缩进效果[^1]。 以下是一个示例代码，展示如何实现多行文本的最后一行尾部缩进，并在超出容器时以省略号（`...`）结尾： ```css .multi-line-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 限制显示的行数 */ overflow: hidden; text-overflow: ellipsis; padding-right: 2em; /* 模拟最后一行尾部缩进的效果 */ } ``` 上述代码中： - `display: -webkit-box` 是实现弹性盒子模型的基础属性，使内容可以在有限空间内按行排列。 - `-webkit-box-orient: vertical` 表示内容垂直排列。 - `-webkit-line-clamp: 3` 控制最多显示的文本行数。 - `overflow: hidden` 防止文本溢出容器。 - `text-overflow: ellipsis` 在文本被截断时添加省略号。 - `padding-right: 2em` 用于模拟最后一行尾部缩进的效果，虽然不是直接作用于最后一行，但在视觉上达到类似目的[^1]。 如果仅希望对最后一行进行特殊的样式处理（如缩进），而不限制文本行数，则可以考虑使用伪元素 `::after` 结合 `position: absolute` 的方式，在最后一行末尾插入一个带有缩进样式的元素，但这通常适用于固定高度的文本块。 ### 示例 HTML ```html <div class="multi-line-text"> 这是一段很长的文本，它将会在多行显示。我们希望在最后一行的尾部实现缩进效果，以增强阅读体验和界面美观度。这种方法特别适用于卡片式设计中的描述文字。 </div> ``` 需要注意的是，目前 CSS 并没有原生支持“仅对最后一行进行缩进”的属性，因此在实际开发中可能需要根据具体需求调整布局方式或借助 JavaScript 动态计算文本行数与位置。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值