css只能显示两行，超出两行用点点点表示，css溢出

最新推荐文章于 2025-11-06 10:49:46 发布

原创最新推荐文章于 2025-11-06 10:49:46 发布 · 6.4k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用CSS属性实现文本超出指定行数后的省略显示效果，关键在于运用text-overflow、overflow及-webkit-line-clamp等属性。

这个属性想设置超出几行，就写几，如上是超出6行，超出的用点点点表示

  text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;

这里是关键，想超出几行就写几

-webkit-line-clamp: 6;

如果是一行超出的话，就这么写

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

溢出的效果图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hero_rong

关注关注

3
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css最多显示两行

海阔天空

02-26

2188

css最多显示两行

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

2301_79325339的博客

09-23

3655

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

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

css 文本显示两行超过显示省略号

最新发布

在职可交流前端开发，包括：web端、uniapp等，欢迎指教。

11-06

646

适用于现代浏览器兼容性：Chrome、Safari、Edge、Firefox备注：最简单最推荐max-height ＋ ::after伪元素兼容旧版浏览器，如IE、旧版Firefox兼容性：所有浏览器备注：需要手动调整max-height。

CSS文本超出显示小数点

宝子的博客

10-07

3152

webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）-webkit-box-orient: vertical：和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示。接着，使用-webkit-box-orient。然后，使用-webkit-line-clamp。属性配合-webkit-line-clamp。属性限制元素内部的文本行数。

多行或者单行文本超出显示点点点，如果保证内容始终垂直居中？

weixin_34208283的博客

11-27

428

我现在的需求是这样的，我目前实现了一个div框，显示文字，超出两行显示...，如果单行要保证垂直居中，我如果给容器使用display:flex;align-items:center；则当文字内容过多的时候会不上下文字有截断；现在效果如下： .info_des { .margin-all(10, 10, 12, 8); display: flex; a...

css 文本超出2行显示点点点

weixin_59395272的博客

04-10

4782

注意点：尽量不设置高度，如果设置高度，需要调试高度与2行的高度一样。

web前端超出两行用省略号表示的实现方法

10-19

在Web前端开发中，有时我们需要对长文本进行限制，使其在特定区域内只显示两行，并在超出时使用省略号来表示剩余内容。这通常用于摘要显示、列表展示或者优化移动设备上的用户体验。本篇文章将详细讲解如何实现这一...

CSS控制超出范围显示引号.txt

02-09

CSS控制超出范围显示引号，CSS控制超出范围显示引号，CSS控制超出范围显示引号，CSS控制超出范围显示引号，CSS控制超出范围显示引号

css 超出用省略号当标题字符溢出用省略号表示

09-25

CSS中处理标题文本溢出用省略号表示的方法是一项常见的网页设计技巧，主要应用于当列表项、标题等文本内容超出其容器宽度时，为了保持界面的整洁性，将超出部分用省略号（...）来代替。以下是从标题、描述以及部分...

css超出字数展示点点点css限制字数超出部份显示点点点

zht825000的专栏

06-15

3140

【代码】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文本只展示两行，多余的用省略号显示

qq_35478008的博客

08-20

1616

【代码】css文本只展示两行，多余的用省略号显示。

最多显示2行文字,多余的省略显示。

qq_43532275的博客

02-14

1万+

前端最多显示2行文字,多余的省略显示。

CSS -文本只显示两行

weixin_43985446的博客

02-25

791

CSS -文本只显示两行

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

奔跑的牛

06-15

1万+

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

css 文字只显示两行，多余省略显示...

weixin_33825683的博客

09-11

180

　　 -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; 　　转载...

格式为最多显示两行，右对齐，超过两行以打点显示怎么做

weixin_43963309的博客

04-29

815

1.如果只显示一行，超出用点表示。 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2.显示两行，超出用点表示。 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-...

css控制文本只显示两行

zhangxy

04-06

4423

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让文本只显示两行

JasonCPJ的专栏

03-03

7174

css让文本只显示两行，多余内容用省略号表示 /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或

微信小程序用css实现超出两行显示省略号

08-13

在微信小程序中实现文本超过两行后显示省略号的效果，通常需要使用特定的 CSS 属性组合来完成。由于微信小程序的样式渲染机制与标准网页有所区别，因此需要通过 `-webkit` 前缀的属性来实现多行文本溢出的省略号效果。 ### 实现多行文本溢出省略号的核心样式以下是一组经过验证的样式规则，适用于微信小程序中实现两行文本溢出后显示省略号的效果： ```css .text-ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ``` ### 样式说明 - `display: -webkit-box;`：将元素设置为弹性盒子模型，以便支持 `-webkit-line-clamp` 属性。 - `overflow: hidden;`：确保超出容器的内容被隐藏。 - `text-overflow: ellipsis;`：当文本溢出时显示省略号。 - `-webkit-line-clamp: 2;`：限制文本显示的最大行数为 2 行。 - `-webkit-box-orient: vertical;`：设置弹性盒子的子元素排列方向为垂直方向。 ### 注意事项 1. **保留 `/*! autoprefixer: off */` 注释**：在某些情况下，如果使用了自动前缀工具（如 Autoprefixer），可能会自动移除 `-webkit` 前缀的属性。为了防止这些属性被移除，可以使用 `/*! autoprefixer: off */` 注释来禁用自动前缀处理。因此，建议保留该注释以确保样式正常生效[^1]。 2. **处理纯数字或纯字母无效的情况**：如果文本内容主要是纯数字或纯字母，可能会导致省略号不生效。可以通过在 CSS 中添加 `word-break: break-all;` 或 `word-wrap: break-word;` 来解决此问题，强制断词以适应容器宽度[^2]。 ```css .text-ellipsis { word-break: break-all; } ``` 3. **单行文本溢出处理**：如果是单行文本溢出显示省略号，可以使用更简单的样式规则： ```css .text-ellipsis-single { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` ### 示例代码以下是一个完整的示例，展示了如何在微信小程序中实现两行文本溢出显示省略号的效果： #### WXML 文件 ```xml <view class="container"> <text class="text-ellipsis">这是一段可能会超出两行的文本内容，如果超出两行将会显示省略号。</text> </view> ``` #### WXSS 文件 ```css .container { width: 100%; padding: 20rpx; } .text-ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } ``` ### 总结通过上述样式规则，可以在微信小程序中实现文本超过两行后显示省略号的效果。需要注意的是，微信小程序对 CSS 的支持有一定的限制，因此需要使用 `-webkit` 前缀的属性来实现多行文本溢出的省略号效果。此外，为了确保样式正常生效，建议保留 `/*! autoprefixer: off */` 注释，并处理纯数字或纯字母无效的情况。 ---