css 解决多行内容超出...

呔，你这厮～

已于 2022-04-27 11:43:31 修改

阅读量163

点赞数

CC 4.0 BY-SA版权

文章标签： css

于 2021-11-17 18:48:48 首次发布

本文链接：https://blog.csdn.net/weixin_43967105/article/details/121384930

本文介绍如何使用CSS来处理多行文本超出容器的情况，包括仅显示一行并在末尾添加省略号的方法，以及显示多行并在末尾添加省略号的方法。

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

css 解决多行内容超出…

如何用css 实现多行内容超出…的效果，分两种情况：

html:

<div class="content">axios深受Angular提供的、\$http服务的启发。 最终，axios是为了在Angular之外使用而提供独立的类似\$http服的务。</div>

1、文本只展示1行，文末…
css:

.content {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2、文本展示多行，文末…
css:

.content {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  // 展示3行
  -webkit-box-orient: vertical;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

呔，你这厮～

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

多行内容超出...显示的JS解决方案

sdasadasds的博客

06-01

2318

一个貌似很简单，但写起来也不简单的问题—对于多行文字，超出…显示。通过css可以实现，但受限于浏览器兼容问题，有时候还需要依赖js来实现。通过js实现，就需要考虑到文字大小，中英文、数字、标点符号所对应的字节长度不一致，如果考虑的不全面，对于不同的文字内容，总会有点差距。首先，我们需要了解，中文汉字，英文字母，数字以及特殊符号所占的字节长度是不一样的，如果需要计算准确，就不能按照字符串的元素个数去截取，把它们换算成字节数来截取，准确度更高。所以，我们需要一个获取字符串字节长度的方法：对于要截取多少内容的字

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

01-08

当我们需要展示大量文本但受限于有限的空间时，可以利用CSS来实现文字的多行省略效果，让超出部分以省略号（...）的形式呈现。在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的...

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

css 多行超出省略

weixin_43995279的博客

05-14

259

单行省略这里不再重复，多行省略依靠css3的新属性上代码 { width：300px;/*可自定义，也可不设*/ overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ /* 以下三个属性是多行省略的关键，*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:3;/*文本占的行数,如果要设置2行加...则设置为2*/ -web

CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示

偏执的小男孩儿

12-07

2458

CSS内容超出...及flex两端对齐

css多行超出隐藏“...”显示

苏紫紫的博客

11-01

610

{ height: 44px; overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;//几行 -webkit-box-orient: vertic...

css处理文本内容过多.....显示问题

github_39274378的博客

08-18

2026

文本溢出显示。。。 display:block; /*内联对象需加*/ word-break:keep-all; /* 不换行 */ white-space:nowrap; /* 不换行 */ overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis; /

CSS 文字溢出：多行溢出、一行溢出

草巾冒小子的博客

12-31

723

案例请点击查看文章详情。

css控制文字超出内容显示...（-webkit-line-clamp 多行文字溢出...兼容火狐ie浏览器）...

06-06

如果你想控制文字超出内容时的显示方式，可以使用CSS的text-overflow属性。text-overflow属性可以取以下三个值之一： 1. clip：超出内容的部分将会被剪切掉，不会显示。 2. ellipsis：超出内容的部分将会被省略号...

css 超过一行/多行显示省略号... - 附示例

m0_48968874的博客

12-22

3950

效果。

CSS中设置( 单行、多行 )超出显示省略号

一片天空

04-24

4499

CSS中设置( 单行、多行 )超出显示省略号

css-单行与多行文本超出处理

Cswan的博客

01-08

439

自动换行 word-wrap:break-word; word-break:normal; 强制不换行 white-space:nowrap; 强制英文单词换行 word-break:break-all; 单行文本不换行多余文本显示省略号 width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出隐藏，显示省略号（IE浏览器不支持） word-break:break-all; ..

css 文字单行多行超出长度后显示 ...

不染-9732

09-04

1571

css 文字单行多行超出长度后显示 ...

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

01-02

1万+

主要介绍文本溢出时的处理方式及实现单行缩略、多行缩略、展开/收起文本功能。

css中实现单行多行文字截断

weixin_43613849的博客

05-09

2267

1、单行文本截断 text-overflow 文本溢出我们经常用到的应该就是 text-overflow: ellipsis 了，相信大家也很熟悉，只需轻松几行代码就可以实现单行文本截断。 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 实现效果：属性浏览器原生支持，各大浏览器兼容性好，缺点就是只支持单行文本截断，并不支持多行文本截取。适用场景：单行文字截断最简单实现...

2022知识点

流离宝宝的博客

10-24

1349

2022总结，vue、js、css、C#、数据库

超实用, 用CSS实现多行文本溢出

weixin_42657666的博客

03-15

4770

用CSS实现文本溢出省略在网页开发过程中，经常会遇到文本内容太长而导致界面布局不美观的情况。此时，我们需要对文本进行省略处理，以达到理想的布局效果。本文将介绍一个使用CSS实现文本溢出省略的方法。方法一：使用text-overflow属性 text-overflow属性是CSS3新增的一个属性，它用于设置文字内容超出其容器时如何显示。通过设置text-overflow: ellipsis;即可实现文本溢出省略的效果，其中“ellipsis”表示显示为省略号。下面是一个例子： div { width

css超出文字显示...多行

08-12

要实现多行文本超出显示的效果，可以使用 CSS 的 `text-overflow` 和 `white-space` 属性。首先，将文本容器的宽度设置为固定值或使用适当的布局方式，确保容器可以容纳多行文本。然后，将 `white-space` 属性设置为 `nowrap`，这样可以防止文本换行。接下来，将 `overflow` 属性设置为 `hidden`，以隐藏超出容器宽度的文本。最后，使用 `text-overflow` 属性来定义当文本超出容器时的显示方式。常用的取值有 `ellipsis`（省略号）和 `clip`（裁剪）。例如，使用 `text-overflow: ellipsis;` 可以在文本超出容器时显示省略号。以下是一个示例的 CSS 代码： ```css .text-container { width: 200px; /* 设置容器宽度 */ white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 隐藏超出容器宽度的文本 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } ``` 在 HTML 中，将文本放置在一个带有 `.text-container` 类名的容器内即可： ```html <div class="text-container"> 这是一段超出容器宽度的多行文本，将会显示省略号。 </div> ``` 通过以上 CSS 的设置，文本将在超出容器宽度时显示省略号，并且不会换行显示。你可以根据实际需要调整容器的宽度和其他样式。