text-overflow实现文字超出宽度，溢出后自动显示为省略号的效果

最新推荐文章于 2022-12-06 10:24:52 发布
最新推荐文章于 2022-12-06 10:24:52 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Div+CSS+Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010819915/article/details/10262101
版权

text-overflow是CSS中一个特殊的样式属性

它具有两个值：text-overflow : clip | ellipsis

clip : 不显示省略标记（...），而是简单的裁剪
ellipsis : 当对象内文本溢出时显示省略标记（...）

 

当列表一行中显示的文字超过固定宽度里，我们想只显示一行，多余的用省略号来显示。就需要用到text-overflow:ellipsis了。

但是必须加上另外两个样式：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）

 

如果仅定义text-overflow:ellipsis; 不能实现省略号效果。
同理：仅定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果

yyldumbbell
关注
专栏目录
text-overflow:ellipsis
朱智文的专栏
02-09 603
关键字 : text-overflow:ellipsis  语法： text-overflow : clip | ellipsis      取值：   clip  ：默认值   。不显示省略标记 (...) ，而是简单的裁切 .  ellipsis ：   当对象内文本溢出时显示省略标记 (...).      可惜 text-overflow 
对象内文本溢出时显示省略标记(...)
xufaxi的专栏
03-02 1041
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 body{ font-size:14px; color:#333; } /*一般的文字截断（适用于内联与块）：*/ .textover{ display:block;/*内联对象需
设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap
CNyuCHengrui的博客
03-07 1211
30秒讲完 通常需要设置文本溢出的地方使用这三句css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 并且设置一个宽度以后可以获得超过宽度的文本进行…省略 但是有时候会出现页面宽度变窄以后不能够使得元素自适应缩小 页面结构打乱 替代 可以将white-space: nowrap;text-overflow;删除 使用-webkit-line-clamp: 1; display: -webkit-box; -webkit-b
多行文本溢出显示省略号(…) text-overflow: ellipsis
weixin_30808575的博客
08-05 335
关于text-overflow text-overflow属性规定当文本溢出包含元素时发生的事情。 默认值： clip 继承性： no 版本： CSS3 JavaScript 语法： object.style.textOverflow="ellipsis" 语法：text-overflow: clip|ellipsis|string; ...
关于省略标记(...)“text-overflow:ellipsis”样式的几点说明
weixin_34292924的博客
01-06 206
关于文字超过指定宽度时，省略标记(...)所占宽度的问题的几点说明：{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100px;} （1）省略标记（...）的宽度，包含在总宽度内"width:100px;" （2）如果将该文字加上链接后，该链接的长度是以设定的宽度为实际长度，而...
使用text-overflow:ellipsis实现文字超出用省略号显示
09-25
具体来说，要实现文字超出用省略号显示的效果，可以按照以下步骤进行设置： 1. `white-space: nowrap;` 这个属性值设置使得文本不会换行，所有内容都在一行内显示。 2. `overflow: hidden;` 此属性设置隐藏超出元素...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...
CSS省略号text-overflow超出溢出显示省略号
12-04
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...
HTML超出文本显示省略号...通过text-overflow实现
09-28
HTML中的“超出文本显示省略号”功能正是为此而设计的，它可以通过CSS的`text-overflow`属性来实现。`text-overflow`是一个非常实用的样式规则，它可以控制当元素内的文本溢出其边界时如何处理。在标题和描述中提到...
文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？
杜永康的博客
12-06 4126
因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。以以下代码为例： 效果图：值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。如果要实现多行文本省略，请继续往下看：实现多行文本省略，同样的，我们需要用text-overflow: e
CSS3属性之text-overflow:ellipsis详解
热门推荐
u013084331的博客
03-14 4万+
1.语法:text-overflow:clip|ellipsis 默认值:clip; 适用于:所有元素 clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 当然这还是不够的，需要加点调料才能出现效果: 那就是配合 overflow:hidden white-space:overflow; 效果
firefox中text-overflow:ellipsis的问题
Linda的前端开发路
05-26 3199
不同浏览器在easyui中对treegrid的text-overflow支持的不同。
css文本（超出）溢出显示省略号
piaoyi1997的博客
07-13 584
效果图如下：文本超出才会显示省略号 overflow visible:默认值，内容不会被修剪，会呈现在元素框之外； hidden：内容会被修剪，并且其余内容是不可见的； scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容; auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容; white-space normal：默认值，多余空白会被浏览器忽略只保留一个； pre：空白会被浏览器保留； pre-wrap：保留一部分空白符序列，但是正常的进行换行； pre-li
overflow超出显示_CSS实现单行、多行文本溢出显示省略号（…）
weixin_39638929的博客
11-29 569
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden; text-overflow:ellipsis; white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢...
text-overflow:ellipsis 文字超出省略号代替不起作用解决方法
HansExploration的博客
04-24 1万+
场景重现无效场景一现在我们来一个正常的例子<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width
单行文本过长自动替换为省略号的css写法：text-overflow:ellipsis;
yummry的博客
11-08 752
今天写项目的时候碰到了一些比较有意思的问题，单行文本过长导致换行。与我预期的效果不太相同。这是一个长长长长长长长长长长长长的测试文本... 后边应该还有文本但是css自动处理为...百度了一下发现css有现成的属性可以控制，记录一下：.pl{//单行文本溢出显示为... width: 200px; overflow:hidden; text-overf
php text 溢出,图文详解CSS文本溢出显示省略号效果（text-overflow）
weixin_36221149的博客
03-24 252
在工作中经常会遇到文本溢出，需要显示省略号的情况，那这个省略号是怎么实现的呢？这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号。对CSS文字溢出加省略号这个知识不熟悉的小伙伴可以参考一下，希望可以帮助到你！text-overflow属性表示当文本超出包含它的元素时，超出部分应该如何显示。写法：text-overflow ： clip | ellipsis属性值描述...
span标签里的内容过长设置隐藏（CSS）
天玄的专栏
07-26 1万+
span{ width: 300px !important; float: left !important; overflow: hidden !important; text-overflow: ellipsis !important; }
css 文字超出部分使用省略号显示
03-30 2565
/*文字超出部分使用省略号显示*/ .ut-s { text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; outline: 0 !important }
text-overflow中间省略没效果
最新发布
09-06
但是，如果你想要在内容溢出时显示省略号（...），你需要同时设置 `text-overflow` 属性为 `ellipsis`，并且确保以下几点： 1. `overflow` 属性需要设置为 `hidden` 或者 `auto`，这样超出元素框的内容才会被隐藏。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值