css文本超出多行显示解决办法

最新推荐文章于 2024-08-22 11:20:46 发布

温馨提示  

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量2.2k

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_50603553/article/details/119336430

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

超出单行显示

		.line{
			/* 单行显示 */
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis
		}

超出多行显示

		.multi-line{
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden; 
		}

结果
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

温馨提示  

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS 文本超出隐藏，并显示省略号

weixin_48596030的博客

10-28

3万+

CSS 文本超出隐藏，并显示省略号

css多行超出显示点_CSS多行文本溢出省略显示

weixin_39645268的博客

12-19

147

CSS多行文本溢出省略显示文本溢出我们经常用到的应该就是text-overflow:ellipsis了，相信大家也很熟悉，但是对于多行文本的溢出处理确接触的不是很多，最近在公司群里面有同事问到，并且自己也遇到过这个问题，所以专门研究过这个问题。首先我们回顾一下以前实现单行缩略是可以通过下面的代码实现的(部分浏览器需要设置宽度)：overflow: hidden;text-overflow: ell...

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

css设置制定行数,超出内容展示....

yuzheh521的博客

05-14

562

css设置制定行数,超出内容展示....

CSS 单行、多行文本溢出处理，纯css实现文本展开 / 收起

最新发布

taiwuyang的博客

08-22

2383

在网页布局和样式设计中，处理文本溢出是一个常见的需求。为了在单行或多行文本过长时处理溢出情况，CSS 提供了几个有用的属性。本文将介绍如何使用这些 CSS 属性来处理文本溢出问题，包括单行和多行的情况。用于记录展开或收起的状态，它是这个功能的核心。限制块级元素显示的行数，这里限制为 3 行。设置或检索伸缩盒对象的子元素的排列方式。这是一个很长的文本，用于演示单行文…强制文本在一行内显示，禁止换行。的状态来实现类似的功能。超出容器的部分将被隐藏。这是一个很长的文本，用于。演示多行文本溢出时的省略。

html 字数太多强制截断,使用text-overflow截断超长文字显示技巧

weixin_33575756的博客

06-03

1900

CSS里的text-overflow属性能用来控制超长溢出的文字内容的显示方式，超出的文字可以是直接截断、用省略号表示，或用自定义的字符替代。text-overflow的起作用环境是在一个‘block’状态下的父元素容器里，它的inline子元素上水平方向不能换行(因为 ‘white-space: nowrap’)的情况下。要想text-overflow起作用，我们还不行能让‘overflow’的...

css超出部分省略（单行、多行，多种方法实现）

大雾起了清晨

07-14

2039

css超出部分省略效果（单行、多行，多种方法实现）

“text”实现“文本溢出截断省略”文本，多出用“...“显示

m0_75047254的博客

07-10

448

（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。（和 -webkit-line-clamp: 2；结合使用，设置或检索伸缩盒对象的子元素的排列方式）（规定当文本溢出时，显示省略符号来代表被修剪的文本）（和 -webkit-line-clamp: 2；当然，除了这两种方法外，还用其他的方法，比如（伪元素 + 定位）、（Float）等。（文字长度超出限定宽度，则隐藏超出的内容）多行文本溢出省略（-webkit-line-clamp）我常用的。（文本溢出限定的宽度就隐藏内容）

单行文本与多行文本溢出时显示省略号的CSS设置

06-11

此时，CSS（Cascading Style Sheets）提供了一种优雅的解决方案，即在文本溢出时显示省略号，这在单行文本和多行文本中都有应用。本篇将详细讲解如何使用CSS来实现这一功能。首先，让我们关注单行文本的处理。在...

css实现单行、多行文本溢出隐藏并显示省略号

zoomsui的博客

06-15

1135

---------必需，将对象作为弹性伸缩盒子模型。---------限制一个块元素显示的内容的行数。---------文本溢出显示省略号。-------文本溢出显示省略号。---------------溢出隐藏。-------------超出隐藏。------强制不换行。

css:实现多行文本居中的五种方法

YangLu888

10-09

4929

css实现多行文本居中的五种方法

CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)

java_wzh123的博客

04-21

7598

CSS实现小图标跟随文本(多行文本省略时显示在省略号后面) 1、应用场景在一个多行省略的文本中，要求文本后显示一个小图标，且触发了多行文本省略后，小图标依然显示在省略号后面。如下图： 2、实现代码 html代码如下： <div class="container"> <div class="content-wrapper"> <div class="content">

纯css 实现类型朋友圈的文本超过多行显示“全文”按钮效果

gaotlantis的博客

06-05

244

父级使用relative定位两个text 一个用来显示使用 absolute 定位并且显示5行，另一个用来撑开父节点的高度，显示6行，多一行是用来显示这个 “全文” 按钮的，然后“全文”按钮也是使用absolute定位，固定在第六行的位置，父节点增加 overflow:hidden;这样当不足6行时，“全文”按钮实际也会显示，只是在父节点外被隐藏了，如果文本有6行，“全文”按钮就刚好在底部。原文：https://juejin.cn/post/7376425155323281443。

文本溢出显示省略号时展示‘查看更多’按钮

FortheOne的博客

07-28

8518

文本溢出显示省略号时同时展示‘查看更多’按钮

css实现内容超出显示省略号且触碰显示完整内容

yuan0209的博客

11-26

3862

css实现内容超出显示省略号且触碰显示完整内容

【css】文字超出固定长度，不换行，多余显示省略号，鼠标悬浮展示全部内容

weixin_41747256的博客

10-23

2780

文字超出固定长度，不换行，多余显示省略号，鼠标悬浮展示全部内容。

CSS文本超出宽度显示省略号，点击展开全部则显示全部，收起

weixin_44962808的博客

01-01

9359

当文本内容字数过多时，用户控制文本内容的展示、收起。恰巧在项目中遇见，因此就有了这个功能的简单实现一、超出文本只显示省略号 HTML代码： <div id="text">这里就是一个标签，里面的内容全是乱写的，也不知道怎么写</div> CSS代码： #text{ width: 150px; /* 容器宽度 */ white-space: no...

如何过多文字显示更多按钮,点击可显示更多文字或者隐藏部分文字

蹦极的考拉

10-21

482

由于介绍比较多，可以将部分文字隐藏，点击更多按钮，将全部文字显示出来同时，如果文字全部显示出来，就显示“收缩” 直接上js代码 1 function showmore(contentid){ 2 var len = 300; //默认显示字数 3 var ctn = document.getElementById(contentid); ...

css规定文本超出指定行数后，展示为...

qq_42988627的博客

11-17

1392

css设置文本超出指定行数后，展示未...

css实现内容过多时隐藏并显示.....

zhoulib__的博客

03-25

1427

.overflow_hidden{ display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: ve...

在css怎么写多行文本超出省略

07-13

在 CSS 中实现多行文本超出省略的效果相对复杂一些，需要结合`display`、`-webkit-line-clamp`和`-webkit-box-orient`等属性来实现。下面是一个示例代码： ```css .container { display: -webkit-box; /* 将容器设置为弹性盒子 */ -webkit-box-orient: vertical; /* 设置盒子的排列方向为垂直方向 */ overflow: hidden; /* 超出部分隐藏 */ -webkit-line-clamp: 3; /* 显示的行数 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 在上述代码中，`.container` 是包含多行文本的容器类名。通过将 `display` 属性设置为 `-webkit-box`，将容器设置为弹性盒子。通过设置 `-webkit-box-orient` 属性为 `vertical`，将盒子的排列方向设置为垂直方向。然后，使用 `-webkit-line-clamp` 属性指定显示的行数，这里示例中设置为3行。最后，使用 `text-overflow` 属性显示省略号来表示文本被省略。请注意，上述代码中使用了 `-webkit-` 前缀，这是因为 `-webkit-line-clamp` 和 `-webkit-box-orient` 属性目前只在 WebKit 浏览器中有效，如 Chrome 和 Safari。其他浏览器可能需要使用其他方式来实现多行文本超出省略的效果。