css-多行文本仅显示两行

幽丶冥

已于 2023-09-18 21:35:45 修改

阅读量390

点赞数 1

文章标签：前端 css

于 2023-09-18 18:18:31 首次发布

本文链接：https://blog.csdn.net/m0_58172543/article/details/132990717

版权

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2 ;
-webkit-box-orient: vertical;

优惠劵

幽丶冥

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css-多行文本仅显示两行

【代码】多行文本仅显示两行。
复制链接

扫一扫

css多行文本溢出时出现省略号的示例

09-24

主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

text-algin:justify实现文本两端对齐方法小结

12-13

text-align:justify与text-align-last:justify 1.text-align MDN中这样介绍到：“text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。”从这里可以看出，控制文本居中对齐直接写text-align:justify就可以。但是这对于多行文本（即有文本换行）除了最后一行都可以实现两端对齐，最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性：text-align-last。 2.text-align-last text-align-l

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

CSS实现文本显示两行(或者多行)，超过部分用省略号隐藏

最新发布

qq_54140719的博客

03-12

733

控制文本显示的行数，并超出的部分用省略号隐藏。

CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

01-08

CSS实现多行文字显示省略号效果.zip

纯CSS实现多行文字截断的示例代码

12-11

做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图：看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整文本超出范围才显示省略号，否则不显示省略号省略号位置显示刚好基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判标准得出最优解。(代码我都传到 jsfiddle 平台，可点击 demo 地址查看) 单行文本截断 text-overflow 文本溢出我们经常用到的应该就是 text-ov

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实现文本显示两行

Depressiom的博客

01-29

7596

注：word-wrap** 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果。在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

CSS -文本只显示两行

weixin_43985446的博客

02-25

482

CSS -文本只显示两行

css中多行溢出只显示2行，超出显示...

Anony_me的博客

03-24

7459

css中多行溢出只显示两行，其余省略…的方式,以下代码放在所需要用到的地方就可以实现了 overflow: hidden;//多出的隐藏 text-overflow: ellipsis;//多出部分用...代替 display: -webkit-box;//定义为盒子模型显示 -webkit-line-clamp: 2;//用来限制在一个块元素显示的文本的行数 -webkit-box-orient: vertical;//从上到下垂直排列子元素（设置伸缩盒子的子元素排

css实现文字占两行

zqz123321_的博客

07-13

2816

css实现文字占两行

限制文本只显示两行

m0_60164188的博客

05-17

1322

元素作为文本容器，然后使用CSS来控制元素的显示效果。在这个CSS代码中，我们使用了一个。需要注意的是，在一些浏览器中，使用。属性需要添加厂商前缀。

CSS--实现文本显示两行

weixin_60811442的博客

04-16

4284

.content { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; overflow-wrap: break-word; word-break: break-all; white.

html前端css实现只显示一行或者2行、3行剩余显示省略号

Shirley__csdn的博客

07-20

1077

css 多行省略

css文本两行显示，超出部分省略号显示

weixin_45606890的博客

09-01

318

css文本两行显示，超出部分省略号显示

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

qq_43532275的博客

02-14

9833

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

纯css控制文字2行显示多余部分隐藏

热门推荐

this_ITBoy的博客

07-01

2万+

在编写页面的时候，经常遇到一些地方的文字显示1行，多余的文字隐藏，这样显示1行的很好控制： css代码如下： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定，这个很常见。但是要是2行文字显示多余隐藏呢，我之前在网上搜到的很多说什么用js去控制，用php控制。。。等等诸如此类的复杂方法，为什么

css控制文字两行显示，多余的显示省略号

weixin_56004744的博客

06-15

295

css控制文字两行显示，多余的显示省略号

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

09-16

7320

上述代码中，-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多行文本溢出显示省略号浏览器兼容性

08-25

CSS多行文本溢出显示省略号的方法在不同浏览器中有一些兼容性问题。以下是两种解决方案: 解决方案一: 使用webkit属性来兼容谷歌和火狐浏览器，但不兼容IE浏览器。你可以使用以下样式规则： ```css overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 希望显示2行 */ -webkit-box-orient: vertical; ``` 这种方法可以在谷歌和火狐浏览器中正常工作，但在IE浏览器中可能会出现问题。解决方案二: 使用兼容性更好的CSS属性，适用于大部分浏览器，包括IE浏览器。你可以使用以下样式规则： ```css width: 200px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ``` 这种方法可以在大部分浏览器中正常工作，包括IE浏览器。综上所述，如果你需要考虑兼容性问题，建议使用解决方案二。如果你只关注谷歌和火狐浏览器，可以使用解决方案一。123 #### 引用[.reference_title] - *1* [纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）](https://blog.csdn.net/c11073138/article/details/101532461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [CSS（层叠样式表）笔记.txt](https://download.csdn.net/download/bxy0806/88237826)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [css多行文本溢出显示省略号兼容ie](https://blog.csdn.net/qq_35469137/article/details/127850254)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交