css文本超出两行省略显示

最新推荐文章于 2022-06-10 08:30:00 发布
最新推荐文章于 2022-06-10 08:30:00 发布
阅读量175 收藏
点赞数
分类专栏： css 文章标签： css文本超出两行省略显示 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hhjian524/article/details/107366275
版权 
#text{
text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
UzumakiHan
关注
专栏目录
CSS实现超出两行显示省略号
2301_79325339的博客
09-23 2388
在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。你可以根据自己的需要调整相关属性的值，以适应不同的场景和要求。通过以上的CSS设置，当文本内容超过两行时，多余的文本将被隐藏，并在末尾显示省略号，从而实现了超出两行显示省略号的效果。属性将元素的显示方式设置为基于弹性盒子，以便我们可以使用弹性盒子布局的相关属性。通过在CSS中为该类设置一些属性，我们实现了超出两行显示省略号的效果。这样，当文本超过两行时，多余的文本部分将被隐藏。
CSS 文本超出隐藏，并显示省略号
weixin_48596030的博客
10-28 3万+
CSS 文本超出隐藏，并显示省略号
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号，但鼠标可以选择文字，酷吧……
04-16
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号，但鼠标可以选择文字，酷吧……
css 超过两行之后显示省略号
z_z_Dragon的博客
07-10 1万+
overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的...
CSS文本设置超出2行显示省略号
老电影故事的博客
06-10 6万+
如图所示，当居住地址字段太长超过2行时就显示 （…） 2、强制2行或多行就要用到CSS3
css 溢出隐藏_文本溢出显示省略号方案总结
weixin_39568653的博客
11-29 421
文本溢出隐藏总结1、单行文本溢出.2、多行文本溢出省略.示例：<短板：line-clamp 属性只在 webkit 内核的浏览器中支持3、js 实现多行文本隐藏溢出<!DOCTYPE html> 4、根据高度判断是否溢出 css实现.特点： - 当内容高度超出了设定的高度，超出部分将被隐藏缺点： - 超出部分没有...提示，观感上比较生硬5、根据高度判断是否溢出 溢出使用...提...
CSS实现文本超过部分，超出两行，超出部分省略号显示
小白的博客
03-15 1万+
文字超过部分显示为省略号 &lt;style&gt; .p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &lt;/style&gt; &lt;body&gt; &lt;p class="p"&gt; 我是一个文本我是一...
CSS文本超出2行就隐藏并且显示省略号
01-19
超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-...
web前端超出两行用省略号表示的实现方法
10-19
总之，通过CSS的特定属性，我们可以轻松地在Web前端实现文本超出两行后使用省略号的效果。不过，为了提供最佳的用户体验和兼容性，建议结合多种技术手段进行优化。同时，持续关注新的CSS规范和技术发展，以便在未来...
CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法
小柠檬爱编程
07-05 1776
实现单行垂直居中，两行垂直居中，超过两行省略…显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webkit-line-clamp:2; .
css 文本超出2行就隐藏并且显示省略号
热门推荐
apurelotus的博客
05-26 16万+
今天做东西，遇到了这个问题，百度后总结得到了这个结果。 首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
使用CSS样式设置文本超出2行显示为省略号
Sophia的博客
01-14 7487
设置文本超出2行显示为省略号 在设计前端页面中，我们经常会遇到文本太长导致超出规定区域的情况。
文本超出两行显示省略号并有“展开”“收起”按钮效果（VUE环境）
cha1919的博客
07-28 1万+
文本超出两行显示省略号的效果使用css3可以很轻松地实现，但是要判断什么时候显示“展开”“收起”按钮却有点麻烦。如果单纯通过字数来判断的话，在有些客户端可能会判断错误，而且中英文的字符所占的位置也有所不同。下面介绍一种通过js计算实现的方法。 1、通过css实现文本超出两行显示省略号 html： <!--在需要实现该效果的元素上设置class值ellipsis，并设置ref属性值infoItem--> <p ref="infoItem" class="ellipsis" :clas
文字内容超出两行时显示省略号
我爱学习的博客
05-05 6165
文字内容超出两行时显示省略号 <view class="newsTitle"> 这里是一条很长很长很长的内容 </view> 设置内容超出两行显示省略号的css样式如下： .newsTitle{ width: 536rpx; //设置宽度 font-size: 32rpx; font-weight: 700; line-height: 52rpx; text-align: left; color: #333333; overflow: hidden; text-
div内文字显示两行，超出两行部分省略号显示css
幸运的Java小神的博客
07-25 1万+
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
css处理超出文本截断问题的两种情况（多行或者单行）
weixin_34375054的博客
09-21 1252
1.非多行的简单处理方式： css代码： .words{ width：400px; overflow:hidden; /*超过部分不显示*/ text-overflow:ellipsis; /*超过部分用点点表示*/ white-space:nowrap;/*不换行*/ } 2.规定行数的截断处理方式 css代码： .words{ 　　width：...
CSS实现文本显示两行，超出省略号...显示
文♥记
07-04 8512
一般CSS .ellipse { word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 使用了预编译CSS的： /**sass**/ .e...
文字显示两行，超出两行部分显示省略号
well..
09-21 8630
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
css——文本强制两行超出就显示省略号
Astar的博客
09-07 5万+
1. 强制一行的情况很简单 overflow:hidden;//超出的隐藏 text-overflow:ellipsis;//省略号 white-space:nowrap;//强制一行显示   2. 如果要强制两行的话，得用到css3的知识 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-...
css文字超出两行省略号
最新发布
08-28
您可以使用CSS的`text-overflow`属性来实现文字超出两行显示省略号的效果。具体的实现步骤如下： 1. 首先，为包含文字的元素添加一个固定的高度和`overflow: hidden`属性，以限制文字的显示区域。 ```css .text-container { height: 3em; /* 两行文字的高度 */ overflow: hidden; } ``` 2. 接下来，设置文字溢出时显示省略号，并且只在两行以上的情况下显示。 ```css .text-container { white-space: nowrap; /* 文字不换行 */ text-overflow: ellipsis; /* 显示省略号 */ } .text-container::after { content: ""; /* 伪元素用于判断是否溢出两行以上 */ display: inline-block; width: 0; overflow: hidden; } ``` 3. 最后，使用JavaScript来判断是否溢出两行以上，并根据结果给元素添加相应的类名。 ```javascript var textContainer = document.querySelector('.text-container'); if (textContainer.scrollHeight > textContainer.clientHeight) { textContainer.classList.add('overflow'); } else { textContainer.classList.remove('overflow'); } ``` 4. 在CSS中定义.overflow类，添加另一种样式来显示省略号。 ```css .overflow { text-overflow: ellipsis; } ``` 这样，当文字超出两行时，就会显示省略号。注意，这种方法需要使用JavaScript来检测文字是否溢出两行以上，因此需要在页面加载完成后执行相应的脚本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值