css 文本超过两行，使用...省略

已于 2024-05-28 15:58:58 修改
阅读量1.1k 收藏
点赞数 3
文章标签： css 前端
于 2024-04-18 14:02:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iblackboy/article/details/137919057
版权
本文介绍了CSS中的关键属性如何控制文本溢出，如`overflow:hidden`隐藏多余内容，`text-overflow:ellipsis`添加省略号，以及`-webkit-line-clamp`限制行数。重点讲解了`-webkit-box`布局模式和`white-space:nowrap`的使用。
摘要由CSDN通过智能技术生成

两行超出省略

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;

一行超出省略

overflow:hidden;//超出的隐藏
text-overflow:ellipsis;//省略号
white-space:nowrap;//强制一行显示
iblackboy
关注
CSS实现超出两行显示省略号
2301_79325339的博客
09-23 2457
在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。你可以根据自己的需要调整相关属性的值，以适应不同的场景和要求。通过以上的CSS设置，当文本内容超过两行时，多余的文本将被隐藏，并在末尾显示省略号，从而实现了超出两行显示省略号的效果。属性将元素的显示方式设置为基于弹性盒子，以便我们可以使用弹性盒子布局的相关属性。通过在CSS中为该类设置一些属性，我们实现了超出两行显示省略号的效果。这样，当文本超过两行时，多余的文本部分将被隐藏。
CSS文本超出2行就隐藏并且显示省略号
01-19
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组
CSS文本设置超出2行显示省略号...
weixin_42464716的博客
01-09 5815
【代码】CSS文本设置超出2行显示省略号...
CSS实现文本溢出省略号或完整显示
码农研究僧的博客
09-19 1783
文本内容超出容器宽度的问题，为了保持页面布局的整洁，通常会使用省略号来隐藏多余的内容 一共有两种方式： 设定省略号 完整展示
css超过两行显示省略号
weixin_46388225的博客
08-06 1948
【代码】css超过两行显示省略号。
CSS让元素内容超出两行用省略号隐藏
HWL5679的博客
06-19 1620
-webkit-line-clamp和相关的WebKit属性不是标准的CSS属性，尽管它们在大多数现代浏览器中都得到了支持。
【css技巧】文本超出两行显示省略号
liyananweb的博客
01-10 2528
是一个WebKit浏览器的私有属性，因此它可能不被所有浏览器支持。如果需要兼容多种浏览器，你可能需要考虑使用JavaScript来实现类似的效果。属性来实现文本超出两行显示省略号的效果。
CSS 实现文本省略显示【单行，2行，多行】
gz_qiulinyong的博客
07-24 8781
限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。通过使用CSS中的和属性，可以轻松实现单行、多行文本的省略显示。无论是简单的单行文本省略还是复杂的多行文本省略，这些方法都能满足各种需求。
css文本超出2行显示...
09-16 1万+
上述代码中，-webkit-line-clamp属性设置为2表示最多显示2行文本，-webkit-box-orient属性设置为vertical表示文本垂直排列。使用CSS的overflow属性来将文本溢出部分隐藏，同时使用white-space属性来设置文本换行方式为normal或者nowrap。使用CSS的text-overflow属性来设置文本超过2行后显示省略号。可以使用CSS的text-overflow和ellipsis属性来实现文本超过2行时显示省略号。
css 文本超出两行显示...
09-26
可以使用CSS的text-overflow属性来实现文本超出两行显示省略号。你可以使用以下代码： ```css .line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 超出几行省略 */ ...
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
10-17
如果高度超过了两行的设定（基于rem单位计算），则创建一个新的`<span>`元素作为展开按钮，并将其添加到元素内部。当用户点击展开/收起按钮时，JavaScript会根据当前类名（`ellipsis`）来判断是展开还是收起状态，并...
css样式超过两行显示...
08-26
您可以使用CSS的`text-overflow`属性来处理长文本的显示问题。设置`text-overflow: ellipsis;`可以在文本溢出时显示省略号。您还需要设置`overflow: ...这样，当文本内容超过两行时，将会显示省略号来表示内容被截断。
css文本一行和两行，超出省略表示及超过2行... 展开-收起
最新发布
10-16
CSS 中控制文本溢出并显示省略标记通常通过 `overflow`, `text-overflow` 和 `display` 属性结合使用。当文本内容超出了其容器的宽度，并且设置了 `overflow: hidden;` 或 `overflow-wrap: break-word;` 时，超出的...
css 文本超出两行省略
柚子的
09-23 213
overflow:hidden; text-overflow: ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp: 2; //显示两行 ...
用css实现超出两行显示省略号
蜗牛~~
08-09 3288
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; ...
css 文本超出2行就隐藏并且显示省略号
热门推荐
apurelotus的博客
05-26 16万+
今天做东西，遇到了这个问题，百度后总结得到了这个结果。 首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
CSS超出两行省略...
KeepLearningDay的博客
10-11 131
以下代码： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //设置行数 line-clamp: 2;//设置行数 -webkit-box-orient: vertical;
css文本超出2行显示省略号
zhw1984974676的博客
11-29 366
文本超过2行显示省略号。
css文字超出两行显示省略号
王成天
04-26 1657
css写单行超出显示省略号。 width: 3rem; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; css文字超出两行显示省略号，用纯css截取 overflow: hidden; text-overflow: ellipsis; display: box; display: -webki...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值