css文本溢出显示省略号，以及会遇到的坑

最新推荐文章于 2022-09-06 23:04:04 发布
原创 最新推荐文章于 2022-09-06 23:04:04 发布 · 288 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文探讨了如何使用white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 实现文本溢出控制，并介绍display:-webkit-box; -webkit-line-clamp:3; 用于多行限制。特别针对字母数字内容，强调了word-break:break-all; word-wrap:break-word; 的应用。

1.需要控制的html加上样式：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2.多行溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.在纯文字的时候没有问题，当内容是字母或者数字时出现问题，需要加上： 

word-break:break-all;
word-wrap: break-word;
【小技巧】CSS如何实现文字溢出显示省略号
qq_65034569的博客
08-03 2157
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1
07-25
实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未
设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap
CNyuCHengrui的博客
03-07 1345
30秒讲完 通常需要设置文本溢出的地方使用这三句css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 并且设置一个宽度以后可以获得超过宽度的文本进行…省略 但是有时候会出现页面宽度变窄以后不能够使得元素自适应缩小 页面结构打乱 替代 可以将white-space: nowrap;text-overflow;删除 使用-webkit-line-clamp: 1; display: -webkit-box; -webkit-b
css实现文字过长超过盒子宽度显示省略标点，以及省略号不生效问题
优快云 for recording problems
05-08 2461
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
CSS“超出显示省略号，后面还能显示其他内容”的解决方案
sfyjknvcx的博客
07-30 6067
大家好，我是南宫。好久没有写博客了。 最近两个月来在做一个Vue_CLI的项目（Vue2.x+ElementUI），项目不简单而且需求很急，一直在加班。这是我上班以来第一次写Vue_CLI项目，之前仅仅只有两次项目经验，而且都是自学时候做的，做这个项目让我很紧张，遇到不少问题，所以考虑写几篇博客分享一下思路和解决方案。 今天的标题有一点拗口了，很抱歉，好像用三言两语很难讲清楚这个需求，而这个需求我觉得是可以理解的，详细描述如下： 有这么一块宽度有限的空间，来显示一段文字内容。文字的字体大小确定，但是
css 单行多行文本超出宽度显示省略号 多行文本的省略号显示失效
Kristen的博客
06-30 571
css 单行多行文本超出宽度显示省略号 多行文本的省略号显示失效 文本在超出宽度时显示省略号的css属性设置 单行文本 .text { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 多行文本 .text { width: 100px; height: 60px; line-height: 20px; /*设置行高和总体文本高度防止文字在显示时被截取了
css实现文本溢出显示省略号
09-25
本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性，还可以避免因文本溢出而造成用户界面的混乱。在CSS中，我们可以通过组合几个属性来实现这一效果，包括`white-space`、`...
CSS实现单行、多行文本溢出显示省略号（…）
07-26
CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看
css文本超出出现省略号问题
weixin_42040328的博客
03-03 465
单行文本超出出现省略号 overflow: hidden;/* 超出文本溢出隐藏 */ text-overflow:ellipsis;/* 溢出用省略号显示 */ white-space: nowrap;/* 溢出不换行 */ 多行文本超出显示省略号 overflow:hidden; /* 超出文本溢出隐藏 */ text-overflow:ellipsis;/* 溢出省略号显示 */ display:-webkit-box; /* 将文本当成弹性盒子 */
文字溢出时的自动隐藏处理
weixin_30563917的博客
03-08 144
1. 一般的文字截断（适用于内联与块）.textover { display:block;/*内联对象需加*/ width:300px; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:e...
CSS 文本超过部分显示省略号，解决数字或英文不换行问题
红烧咸咸鱼
06-28 2219
单行文本: .singleText{ //记得一定要给div宽度 width:200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本: .moreText{ //记得一定要给div宽度 width:200px; white-space: normal; overflow: hidden; text-overflow: ellipsis; dis.
css文字超出省略（不生效主要从盒模型问题处理）
weixin_43837268的博客
05-16 9971
1.单行省略 width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; 2.多行省略 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -we...
css文字超出隐藏的省略号发生错位的解决办法
ljw_Josie的博客
05-06 877
现象：文本超出隐藏，省略号发生了遮挡和错位 解决办法: 删除text-align: justify; 当初是为了文本两端对齐视觉上好看些才加的，没想到这行css会在文本超出隐藏的时候出现这样的错位。 去除样式后恢复正常 ...
CSS文本溢出省略号
dont_curry的博客
09-06 668
CSS文本溢出省略号
CSS，文本溢出显示省略号
沧海龙腾LV的博客
07-05 1万+
css文本溢出显示省略号
gitee码云克隆项目账户密码输入错误解决方法
热门推荐
Two_Too的专栏
12-17 1万+
今天盆友发给我一个项目，非常兴奋的打开命令行开始克隆，第一次克隆gitee的项目，一激动账户密码输错了。 在命令行重新输入账户和密码不起作用，脑瓜疼呀~~~~~~~ 经过一番查找资料，发现输错密码，不能用命令行更改，，，， 找到了一种方法： 1.打开电脑的控制面板，找到凭据管理器 2.打开凭据管理器之后，选择 windows凭据 ，找到gite...
谷歌修改useragent，chrome模拟微信、QQ内置浏览器
Two_Too的专栏
07-16 6632
1、首先咋模拟时，需要用到UA，微信和 QQ 内置浏览器 UA 安卓 QQ 内置浏览器 UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 > Chrome/37.0.0.0 Mobile Safari...
echarts踩坑，dataZoom和X坐标系文字重叠解决方法
Two_Too的专栏
04-19 6627
找到echarts中的grid配置 ： 代码写入bottom属性： grid:{ bottom: "70px" } 完成效果：
css 文本溢出显示省略号
最新发布
08-31
CSS 中文本溢出显示省略号的功能通常通过 `text-overflow` 和 `overflow` 属性配合使用来实现。当你设置元素的内容超出其容器时，可以控制如何处理溢出的部分。 1. `text-overflow` 属性：用于指定当文本溢出元素内容区域时的行为。常见的值有 `ellipsis`（显示省略号），`clip`（截断超出部分），以及 `hidden`（隐藏溢出内容）。 例子： ```css .text-truncate { white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 如果内容溢出，隐藏多余的 */ text-overflow: ellipsis; /* 显示省略号 ... */ } ``` 2. `overflow` 属性：它定义了当内容超过容器尺寸时，多余部分是否可见。配合 `text-overflow` 使用，可以使文本溢出显示成省略号。 结合两者使用： ```css .text-truncate { display: -webkit-box; overflow: hidden; /* 隐藏超出部分 */ -webkit-line-clamp: 3; /* 只显示三行 */ -webkit-box-orient: vertical; /* 设置为垂直方向的多行盒模型 */ text-overflow: ellipsis; /* 当超出时显示省略号 */ } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值