文字超过两行时显示省略号-CSS样式

最新推荐文章于 2024-08-06 13:56:58 发布

原创最新推荐文章于 2024-08-06 13:56:58 发布 · 748 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html #开发语言 #html5 #css3 #less

前端bug合集专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在CSS中通过`text-overflow`,`overflow`,`white-space`,`-webkit-line-clamp`和`-webkit-box-orient`属性组合使用，来实现当文本超过两行时自动显示省略号的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要在 CSS 中实现当文字超过两行时显示省略号，可以使用 text-overflow 和 overflow 属性结合使用，以及设置 white-space 属性。

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
 /* 显示的行数，可自行修改 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

仗剑恬雅人

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS实现超出两行显示省略号

2301_79325339的博客

09-23

3403

在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。你可以根据自己的需要调整相关属性的值，以适应不同的场景和要求。通过以上的CSS设置，当文本内容超过两行时，多余的文本将被隐藏，并在末尾显示省略号，从而实现了超出两行显示省略号的效果。属性将元素的显示方式设置为基于弹性盒子，以便我们可以使用弹性盒子布局的相关属性。通过在CSS中为该类设置一些属性，我们实现了超出两行显示省略号的效果。这样，当文本超过两行时，多余的文本部分将被隐藏。

微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法

番茄Salad

08-03

898

微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法

1 条评论您还未登录，请先登录后发表或查看评论

【css技巧】文本超出两行显示省略号

liyananweb的博客

01-10

3058

是一个WebKit浏览器的私有属性，因此它可能不被所有浏览器支持。如果需要兼容多种浏览器，你可能需要考虑使用JavaScript来实现类似的效果。属性来实现文本超出两行显示省略号的效果。

css超过两行显示省略号

weixin_46388225的博客

08-06

3414

【代码】css超过两行显示省略号。

用css实现超出两行显示省略号

蜗牛~~

08-09

3810

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; ...

css 文本超出2行就隐藏并且显示省略号

热门推荐

apurelotus的博客

05-26

17万+

今天做东西，遇到了这个问题，百度后总结得到了这个结果。首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？

判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号

10-17

总之，实现“判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号”的功能，需要结合CSS的溢出省略策略与JavaScript的动态交互处理。通过这样的方式，我们可以为用户提供更好的阅读体验，同时保持界面...

CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法

小柠檬爱编程

07-05

1895

实现单行垂直居中，两行垂直居中，超过两行省略…显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webkit-line-clamp:2; .

微信小程序实现多行文字超出部分省略号显示功能

10-16

首先，我们要明确目标：设置一个文本框，让它最多显示两行，超过两行的内容则被省略号替换。微信小程序提供了CSS样式来实现这个需求。在CSS中，我们可以利用`-webkit-line-clamp`属性来限制元素显示的文本行数，以及...

CSS省略号text-overflow超出溢出显示省略号

09-25

在内容过多无法完全显示时，通过CSS的省略号样式来优雅地展示信息，提高用户的阅读体验。此外，为链接（a）标签添加hover效果，可以增强交互性。总结来说，text-overflow属性是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---实现文本超过两行时显示省略号（...）的效果

zyue_1217的博客

07-26

1万+

如果需要兼容其他浏览器，可以考虑使用JavaScript或其他CSS技术来实现类似的效果。，我们将容器元素设置为仅显示两行文本。当文本超过两行时，将隐藏溢出部分，并通过。是一个非标准的CSS属性，仅在WebKit浏览器上有效。是包裹文本内容的容器元素的类名。

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 文本超过两行，使用...省略

iblackboy的博客

04-18

1785

【代码】css 文本超过两行，使用...省略。

CSS实现文本显示两行，超出部分显示省略号（常用到）

mengmeng1_的博客

02-03

2432

<div class="option-text"> <span v-text ="item.itemValue" class='ellipsis'></span> </div> <style> .ellipsis { word-break: break-all; text-overfl...

CSS文本设置超出2行显示省略号

老电影故事的博客

06-10

6万+

如图所示，当居住地址字段太长超过2行时就显示（…） 2、强制2行或多行就要用到CSS3

css 文字超出两行显示省略号