CSS 文本超出隐藏

Joker`s smile

已于 2022-10-26 11:19:28 修改

阅读量4.9k

点赞数 2

文章标签： css 前端 css3

于 2022-06-24 10:12:52 首次发布

本文链接：https://blog.csdn.net/qq_37819292/article/details/125440343

版权

单行文本超出隐藏

div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

注：布局中存在flex布局，会出现不起作用。解决方案是再嵌套一层。

有的时候不知道啥原因，单行文本超出隐藏就是没作用（可能是没有设定固定宽高的原因）。采用多行文本超出隐藏方案解决，如下：

多行文本超出隐藏

div {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

在react- antd中搭配使用时，有的时候写在外部样式表中，部分样式不知道啥原因会丢失，直接暴力使用行内样式解决。

{
    "overflow": "hidden",
    "textOverflow": "ellipsis",
    "display": "-webkit-box",
    "WebkitLineClamp": 3,
    "WebkitBoxOrient": "vertical"
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Joker`s smile

关注关注

2
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

weixin_48596030的博客

10-28

3万+

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

CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

09-24

根据标题和描述，以及提供的部分内容，我们可以了解关于CSS文本超出指定宽度后隐藏并显示为省略号的实现方法，以及相关的知识点。以下详细说明： 1. CSS中实现文本溢出显示省略号的基本属性组合： - `text-...

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

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 文字超出隐藏

fineworkmanship的博客

11-05

3328

css 样式分享

文本超出隐藏

qq_39064713的博客

03-26

181

可以根据实际需求调整需要展示的行数。：文字太长时需要只展示一行或者2行之类的，超出时...否则编译完成之后会被删除。

css超出隐藏

热门推荐

时漂亮的博客

02-19

2万+

1.单行超出隐藏 div { overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //用省略号显示 white-space:nowrap; //不换行 } 2.多行超出隐藏 div{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 从上

CSS实现文字超出隐藏

wshwsh_的博客

02-25

765

/注意：需要超出隐藏的元素不能是行内元素，因为行内元素不能设置宽度，想要文本超出隐藏必须有宽度。

css文本超出隐藏

Li_wen258的博客

04-30

575

多行文本： .box{ width: 100%; overflow: hidden;//超出文本隐藏 text-overflow: ellipsis;//溢出显示省略号 display: -webkit-box;//设置为弹性盒子 -webkit-box-orient: vertical; -webkit-line-clamp: 2;//只显示两行 } 单行文本： .box{ width: 200px; word-wrap: brea

css li 超出隐藏代码

10-30

`，文本将保持在同一行内，这是实现单行文本超出隐藏的基础。 3. `text-overflow: ellipsis;`：当文本超出其容器宽度并且`white-space`属性设置为`nowrap`时，此属性会使得超出部分显示为省略号。该属性告诉浏览器...

解决layui表格内文本超出隐藏的问题

10-16

在Layui中，表格内文本超出隐藏的问题可以通过CSS样式控制来解决。通常情况下，Layui表格的默认样式会使得超出文本部分隐藏，如果需要显示超出的文本，需要调整对应的CSS样式。这里提供了一种方法，即通过修改`....

css实现文本超出隐藏

生存不忘生活

10-28

628

css实现文本超过隐藏，并且以...来显示，这种应该大家做项目的很多时候都会遇到。单行文字超过隐藏：

css 文本超出隐藏

weixin_53561783的博客

09-23

507

1.单行内容超出隐藏。2.多行文本超出隐藏。

css文字超出隐藏

finishUp的博客

10-10

390

css文字超出隐藏

前端css文本超出隐藏或显示省略号的多种方式

丘比特没有箭的博客

01-25

1万+

前端css文本超出隐藏或显示省略号的多种方式

css文本溢出隐藏

m0_63477273的博客

05-16

712

文本溢出隐藏

CSS 超出隐藏

weixin_45561885的博客

08-09

1106

2、超出两行甚至多行，隐藏文本并显示省略号。1.超出一行，隐藏文本并显示。

CSS：overflow溢出显示隐藏

听海边涛声

08-10

6964

CSS：overflow溢出显示隐藏

CSS 中处理文本溢出并隐藏它

m0_64036296的博客

08-23

1647

要在 CSS 中处理文本溢出并隐藏它，通常会用到以下几个属性。我们可以通过对每个属性的作用进行详细说明，并提供一个全面的使用案例。

前端文本超出隐藏

最新发布

03-27

### 前端文本超出隐藏的CSS实现方式 #### 单行文本超出隐藏对于单行文本超出隐藏的需求，可以使用以下CSS属性组合来实现： ```css div { overflow: hidden; /* 超出的内容被裁剪 */ white-space: nowrap; /* 强制在同一行内显示所有文本 */ text-overflow: ellipsis; /* 当文本溢出时显示省略号 */ } ``` 这种方法适用于简单的单行文本处理场景[^1]。 --- #### 多行文本超出隐藏如果需要处理多行文本的超出隐藏，则需要用到一些额外的CSS属性。以下是常见的解决方案之一： ```css div { display: -webkit-box; /* 使用弹性盒子模型 */ -webkit-box-orient: vertical; /* 设置子元素垂直排列 */ -webkit-line-clamp: 3; /* 控制最大显示行数（此处设置为3行） */ overflow: hidden; /* 超过指定行数的部分隐藏 */ text-overflow: ellipsis; /* 显示省略号提示有更多内容 */ } ``` 需要注意的是，`-webkit-line-clamp` 是一个非标准的WebKit扩展属性，可能无法在某些浏览器上完全兼容[^3]。因此，在实际项目中应考虑测试不同浏览器的表现，并提供相应的回退方案。 --- #### 隐藏滚动条当容器内的内容超出了其尺寸范围时，默认会显示滚动条。如果不希望看到滚动条，可以通过如下样式将其隐藏： ```css ::-webkit-scrollbar { display: none; /* 完全移除滚动条 */ } /* 或者通过常规方法隐藏整个区域的滚动行为 */ div { overflow-y: hidden; } ``` 此方法仅影响视觉上的滚动条呈现，而不会改变页面的实际滚动功能。 --- #### 综合示例代码下面是一个综合的例子，展示如何分别应用上述两种情况下的文本截断技术： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本超出隐藏</title> <style> .single-line { width: 200px; border: 1px solid #ccc; padding: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .multi-lines { width: 200px; height: 60px; border: 1px solid #ccc; padding: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="single-line">这是一段非常长的文字用于演示单行文本超出隐藏的效果。</div><br/> <div class="multi-lines">这是另一段更长的文字，我们将利用它来说明多行文本超出隐藏的功能。可以看到这里支持三行以上的自动截取操作。</div> </body> </html> ``` 以上代码片段展示了针对单行和多行文本的不同处理策略[^4]。 ---