文字超出两行自动隐藏

最新推荐文章于 2024-06-19 10:59:59 发布
最新推荐文章于 2024-06-19 10:59:59 发布
阅读量860 收藏 2
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43487782/article/details/106931968
版权

项目中需要实现一个列表，列表的每一项要求最多显示两行文字，超出两行就显示为“…”。实现的代码如下，其中 -webkit 适配chrome、safari等浏览器，IE等浏览器不兼容该属性，文字超出一行之后就会隐藏。

width: 150px;
overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; /* 这里设置需要显示几行文本 */
天猫精灵998
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 超出三行隐藏_《vue+vant 文本超出两行部分省略号显示》
weixin_39530647的博客
01-30 1338
今天做移动端项目，遇到了这个问题​面向百度后总结得到了这个结果。首先，我们要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出则不换行 这里不符合我们的要求所有舍弃掉css3完美解决了这个问题，解决方法如下：display:-webkit-box; //将对...
基于JavaScript实现文字超出部分隐藏
10-22
这个示例中，我们将讨论如何使用JavaScript来实现文字超出部分隐藏的功能。 首先，我们看到HTML结构中包含了两个`<div>`元素，它们都有不同的类名（`.text` 和 `.text1`）。这两个`<div>`分别包含了两段文字，其中`...
CSS设置一行文字，超出部分自动隐藏
余浩的博客
07-16 5143
CSS设置一行文字，超出部分自动隐藏 .text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
CSS让元素内容超出两行用省略号隐藏
最新发布
HWL5679的博客
06-19 710
-webkit-line-clamp和相关的WebKit属性不是标准的CSS属性，尽管它们在大多数现代浏览器中都得到了支持。
vue文本超出2行隐藏
weixin_47961174的博客
03-19 204
【代码】vue文本超出2行隐藏。
文本超出两行，显示隐藏和展开按钮
kilito_01的博客
04-10 2092
文本超出两行，显示隐藏和展开按钮
div css 超出文字自动隐藏代码
网上这点事
01-07 2444
在网站制作过程中往往有的时候某个模块文字多了影响美观， 这时候我们就可以用div css 来控制这个模块超出大小部分的文字自动隐藏起来，又起到SEO效果，这样搜索引擎是可以看到的，未隐藏之前与隐藏之后的效果显而易见，在版面的美观度上起到一定的作用，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助。 代码如下： overflow:hidden;text-overflow:ellip
h5显示两行文字，溢出的隐藏
weixin_60591474的博客
08-09 623
h5显示两行文字，溢出的隐藏
CSS 超出隐藏
weixin_45561885的博客
08-09 894
2、超出两行甚至多行，隐藏文本并显示省略号。1.超出一行，隐藏文本并显示。
css当文字超出两行时用省略号,css 两行、多行超出后用省略号...表示
weixin_29607417的博客
08-04 1909
.item-name {letter-spacing: ;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: ; /*要显示的行数*/-webkit-box-orient: vertical;font-size:12px;}css超出部分显示…单行超出部分显示…overflow: hi...
实现文字超过两行 隐藏并三个点表示更多
weixin_44867717的博客
06-14 1530
实现文字超过两行 隐藏并三个点表示更多… 样式 .c-b { float: left; .d-l { width: 340px; .wz { white-space: nowrap; /*强制在一行显示*/ text-overflow: ellipsis; /*设置超出内容显示...*/ overflow: hidden; /*一定不能少 超出的内容进行隐藏*/ }
文本超出部分隐藏的两种方法
09-24
/* 显示两行，超出部分隐藏 */ } ``` 这里，`-webkit-line-clamp: 2` 指定了显示的最大行数，超过这个数量的行将会被隐藏。需要注意的是，这种方法仅在Webkit浏览器（如Chrome和Safari）中有效，对于其他浏览器（如...
ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏
09-25
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
表格里使用text-overflow后不能隐藏超出的文本的解决方法
09-25
表格有自己的布局规则，当表格单元格（`<td>`或`<th>`）的内容过多时，它可能会自动调整列宽以适应内容，这就会导致`text-overflow`失效，无法正确隐藏或省略超出的文本。为了解决这个问题，我们需要对表格的布局...
vue控制多行文字展开收起的实现示例
10-16
在这个例子中，设置了3行的限制，当内容超过3行时，超出部分将被隐藏。同时，通过`display: -webkit-box`和`-webkit-box-orient: vertical`使文本块成为一个竖向的盒模型，以便 `-webkit-line-clamp` 能正常工作。`...
详解Vue中的样式穿透＞＞＞
weixin_43487782的博客
08-31 9058
如果想在一个组件中覆盖插件的样式，就需要用到样式穿透。 发现问题：组件无法覆盖插件的样式 如下所示，下面是一个分页器插件，默认的颜色是蓝色，定义在.swiper-pagination-bullet-active中。 如果想要覆盖插件默认的样式，在组件中直接设置样式是不会生效的。 这是因为组件自己的样式出现在前面，而插件的样式会从后面进来。如图所示，可以看到head标签中有多个style，组件样式定义在最上面，而插件的样式在下面。由于两处地方都设置了同一个属性，后面设置的属性优先级更高，因此插件的样式胜
position: fixed如何相对父元素定位
weixin_43487782的博客
09-27 8418
在项目中遇到一个问题，项目中有一个弹框，弹框中有一个anchor组件，弹框中的内容可以滚动，而anchor组件需要相对于弹框保持固定。我们知道，position: fixed是相对于浏览器窗口进行定位，而弹框宽度是固定的，浏览器窗口的宽度则是不确定的，所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢？ 查了下资料发现，虽然position:fixed是对于浏览器窗口定位的，但是只要不设置fixed元素的top，bottom，left，right，此时该元素就是相对于父元素进
CSS选择器正则表达式的使用
weixin_43487782的博客
09-16 1930
之前项目中有一个功能，需要根据图片URL后缀的扩展名匹配相应的图标，当时是用JS的switch case实现的，因为switch case可以进行多对一匹配，而对象key value只能进行一对一匹配。 今天偶然看到CSS也能进行正则匹配，并且专门就是针对这种场景的，这样以后直接用CSS就行了，性能肯定有所提升。 如果还有同学不明白CSS选择器正则匹配，看看下面几个例子应该马上就能明白了。 /* 匹配所有带href属性的标签 */ [href] {padding-left: 18px;} /* 匹配href
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、付费专栏及课程。

余额充值