CSS实现文本溢出隐藏

最新推荐文章于 2024-07-12 08:49:43 发布
最新推荐文章于 2024-07-12 08:49:43 发布
阅读量7.4k 收藏 7
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45846326/article/details/105751824
版权

CSS实现文本溢出用省略号代替，在不同的页面宽度下，我们想要保证页面的布局不被打乱，那么我们就要对溢出的文字进行隐藏。

1、单行溢出的文字隐藏

在这里插入图片描述
overflow一定不要忘记了！！！ 我们一起来看看效果
在这里插入图片描述

2、多行溢出的文字隐藏

多行溢出的文字隐藏就涉及到兼容性的问题了，目前只兼容webkit内核的浏览器
在这里插入图片描述
在这里插入图片描述
我们一起来看一下-webkit-line-clamp这个属性，目前我们写的是3，达到的效果是显示隐藏的效果在第三行，如果我们写2会不会变成第二行呢？
在这里插入图片描述
答案当然是 你写多少就会在第多少行显示，但是不能大于本身的显示行数。(根据值的大小自行调整)

微信用户xyk
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS单行／多行文本溢出隐藏
小王的技术库
01-03 1万+
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号单行文本溢出多行文本溢出为大家准备了一个前端资料包。
css实现单行、多行文本溢出隐藏并显示省略号
zoomsui的博客
06-15 990
---------必需，将对象作为弹性伸缩盒子模型。---------限制一个块元素显示的内容的行数。---------文本溢出显示省略号。-------文本溢出显示省略号。---------------溢出隐藏。-------------超出隐藏。------强制不换行。
css多行文本溢出时出现省略号的示例
09-24
主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css实现文本溢出显示省略号
09-25
主要介绍了css实现文本溢出显示省略号的方法和示例分享，推荐给大家。
如何用CSS实现超出隐藏省略
最新发布
My_wife_QBL的博客
07-12 483
CSS提供了简洁而强大的工具来处理超出容器范围的文本内容，通过合理使用和overflow属性，可以轻松实现文本的省略显示效果。这不仅提升了页面的视觉效果，还能提高用户体验。希望本文能为开发者提供有价值的指导，帮助大家在实际项目中更好地应用这些CSS技巧。
CSS|文本溢出隐藏
热门推荐
m0_72383454的博客
07-15 1万+
介绍单行文本和多行文本文本溢出时如何隐藏
前端单、多行文本溢出截断省略
tianfugui的博客
01-08 1135
前言 在前端开发中，文本溢出截断是比较常见的需求，也是一件经常需要考虑的业务场景细节，它能让我们的页面看起来没那么“怪异”。 本文通过css和js两种编码方案，给出通用的解决方案。 单行文本溢出截断 CSS篇 核心CSS语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行） text-overf...
css设置文本溢出隐藏...
zybijiso666的博客
10-13 962
在CSS中，文本溢出可以使用。
css设置文字溢出隐藏
weixin_48677331的博客
04-18 1775
css 设置文字溢出隐藏
css文本溢出隐藏显示省略号
weixin_48271592的博客
05-13 364
文本溢出隐藏显示省略号 1.单行文本溢出隐藏省略号 .text{ white-space: nowrap;//强制不换行 overflow: hidden;//溢出内容隐藏 text-overflow: ellipsis;//文本溢出出现省略号 } 2.多行文本溢出隐藏显示省略号 overflow: hidden;//溢出内容隐藏 /* text-overflow: ellipsis; */ display: -webkit-box; -webkit-line-clamp: 2;//设置可
css 文字溢出隐藏
IT_Ping的博客
05-17 2952
css设置文字溢出隐藏 让文字只显示一行，超出显示省略号 多行文本, 显示 n 行,剩下的省略号替代 让文字只显示一行，超出显示省略号 overflow: hidden; // 溢出部分隐藏 white-space: nowrap; // 文字不换行 text-overflow: ellipsis; // 显示省略号 1 2 3 多行文本, 显示 n 行,剩下的省略号替代 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;..
CSS溢出文字隐藏
rraxx的博客
03-14 401
CSS用户界面样式鼠标样式cursor 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor:default 小白| pointer 小手| move 移动| text 文本 ...
css溢出隐藏
A1452635110的博客
03-08 490
一行溢出隐藏 white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文本溢出隐藏,-webkit-line-clamp属性数字是几，就是几行溢出隐藏 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; 多行文本溢出隐藏设置后多出来的文字还是会显示
文本溢出体验进阶：CSS 技巧实现单行/多行隐藏展示以及实际场景应用，确保内容可读性和布局整洁性
JINGWHALE
04-20 1979
本文详细介绍了文本溢出隐藏并显示省略号、文本溢出隐藏能滑动展示隐藏部分，并列举了诸如常用的文本溢出隐藏应用场景。CSS文本溢出隐藏是一种常见的场景，它广泛应用于各种网页设计中，旨在确保内容的可读性和布局的整洁性，特别是在空间有限或需要适应不同屏幕尺寸的情况下。
溢出的文字隐藏
Z__XY_的博客
01-16 446
word-break:自动换行 normal:使用浏览器默认的换行规则 break-all:允许在单词内换行 keep-all:只能在半角空格或连字符处换行（不允许将单词拆开） 主要处理英文单词 white-space white-space设置或检索对象内文本显示方式。通常我们适用于强制一行显示内容 normal:默认处理方式 nowrap:强制在同一行内显示所有文本，知道文本结束或者遭遇br标签才换行 text-overflow:文字溢出 text-overflow:clip
文本溢出隐藏
追上昨天的自己
07-24 1119
文本溢出隐藏是网页中经常遇见的一种技术非常的普遍，文本溢出隐藏又分为了单行文本溢出隐藏，多行文本溢出隐藏 单行文本溢出隐藏重要属性 white-space:规定了强制文本在一行显示，默认参数nowrap overflow:文本隐藏必须与overflow连用才能生效 text-overflow:改属性规定了当文本溢出盒子的时候怎么处理文本 代码实例 div{ ...
Css溢出文字隐藏
weixin_63712639的博客
02-11 283
显示1行 /* 显示一行 */ .one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 显示2行 /* 显示两行 */ .two-line { /* 溢出内容隐藏 */ overflow: hidden; /* 文本溢出部分用省略号代替 */ text-overflow: elli.
css单行文字和多行文字溢出隐藏
weixin_43862991的博客
06-29 465
单行文字溢出隐藏步骤 强制文字一行显示 white-space: nowrap; 将多余的文字隐藏 overflow: hidden; 将隐藏的文字使用省略号代替 text-overflow: ellipsis; 多行文字溢出隐藏步骤 强制文字一行显示 white-space: nowrap; 将多余的文字隐藏 overflow: hidden; 将隐藏的文字使用省略号代替 text-overflow: ellipsis; 如下属性用来辅助实现多行文字溢出显
css 实现单行文本溢出隐藏
08-11
要实现单行文本溢出隐藏，你可以使用CSS的`text-overflow`和`overflow`属性。下面是一个示例代码： ```html <style> .single-line-text { white-space: nowrap; /* 不换行 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 文本溢出显示省略号 */ width: 200px; /* 设置文本容器的宽度 */ } </style> <div class="single-line-text"> This is a long text that will be truncated if it exceeds the container width. </div> ``` 在上面的代码中，我们通过`.single-line-text`选择器来定义文本容器的样式。通过`white-space: nowrap`属性，我们阻止文本换行。使用`overflow: hidden`属性，我们将溢出的部分隐藏起来。最后，使用`text-overflow: ellipsis`属性，当文本溢出时，显示省略号来表明被截断。 你可以根据需要调整`.single-line-text`容器的宽度，以适应你的布局。这样，文本将会在超过容器宽度时被截断，并显示省略号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值