css文本限制最多两行,超出后显示 “...”

overflow: hidden;
text-overflow: ellipsis;  /* 超出部分省略号 */
word-break: break-all;  /* break-all(允许在单词内换行。) */  
display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 2; /* 显示的行数 */
max-height: 80rpx; /* 设置最大高度,根据行高,要几行乘以几倍 */
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 你可以使用CSS中的`-webkit-line-clamp`属性来实现文字两行显示超出用省略号的效果。具体的实现方法如下: 1. 首先,你需要为文本容器元素设置一个固定的高度,并添加`overflow: hidden`属性,以限制文本内容的显示范围。 2. 接下来,使用`display: -webkit-box`属性将文本容器元素转换为一个基于行的容器。 3. 然后,使用`-webkit-line-clamp`属性来设置文本容器元素最多显示的行数。例如,如果你想将文本限制两行,则将`-webkit-line-clamp`属性设置为`2`。 4. 最后,使用`-webkit-box-orient: vertical`属性来将文本垂直排列。 以下是一个示例CSS代码: ```CSS .container { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; height: 50px; } ``` 在HTML中,你可以将文本放置在一个具有`.container`类的`div`元素中,如下所示: ```HTML <div class="container"> 这里是需要显示省略号的文本内容。 </div> ``` 这样,当文本内容超出两行时,省略号就会自动显示出来了。需要注意的是,`-webkit-line-clamp`属性只在WebKit浏览器中有效,因此你可能需要根据需要添加其他浏览器的前缀。 ### 回答2: 在CSS中,可以使用text-overflow属性实现当文字内容超出容器宽度时,显示省略号(...)来代替超出部分的显示。结合white-space和overflow属性,可以实现多行文本的省略显示。 具体步骤如下: 1. 首先,需要将容器的宽度和高度设置为固定值或者使用max-width和max-height属性限制容器的大小。 2. 设置white-space属性为nowrap,这样文字将不会换行,并保持一行显示。 3. 给容器添加overflow属性,值可以是hidden, scroll, 或auto,根据实际情况选择。这样当文字内容超出容器宽度时,就会出现滚动条或者隐藏超出部分。 4. 添加text-overflow属性,设置为ellipsis,这样当文字超出限制的时候,会显示省略号(...)来表示被隐藏的部分。 例如,假设有一个div容器,其宽度为200px,高度为50px,我们想要显示两行文字内容: ```css div { width: 200px; height: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 然后,在div标签内编写两行文字内容: ```html <div> 这是一段很长很长的文字内容,超过了div的宽度,希望显示省略号来代替超出部分的显示。 </div> ``` 当文字内容超过容器的宽度时,会自动将超出的内容隐藏,并在末尾显示省略号来表示被隐藏的部分,实现了两行文字的省略显示

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值