关于设置了text-overflow:ellipsis后没有显示省略号的问题

最新推荐文章于 2024-05-10 10:16:57 发布
最新推荐文章于 2024-05-10 10:16:57 发布
阅读量4.2k 收藏
点赞数 4
分类专栏： css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45732206/article/details/104042474
版权

关于设置了text-overflow:ellipsis后没有显示省略号的问题

今天在写页面的时候遇到一个问题，一个选择标签里面的字太长，需要让超出的字隐藏并且显示省略号，于是我给标签设置了
text-overflow：ellipsis；
overflow：hidden；
white-space：nowrap；
但是发现标签里的字还是没有显示省略号，经过一番折腾后终于发现是display：flex；的问题，把这个属性删掉就完事了，改用其他方式居中，因为我用习惯了这个属性，经常用这个属性来设置垂直和居中，希望大家能注意一下

搬砖的清风
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS属性text-overflow的使用问题
11-21
text-overflow：clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1，overflow:hidden;　　　　这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部不显示才能裁剪。不然裁剪之后还是显示溢出就想日狗了 　　　　　　　　　　　　　　试了下visible. 那text-overflow就不管用了。该溢出还是溢出。管你用没用text-overflow。 2，white-space:nowrap;  　 这个属性是空白符的操作。这里是让整个文本不换行显示;让整个内容单行显示，配合width的话就可以进
无js实现text-overflow: ellipsis; 完美支持Firefox
03-01
在前端开发中，文本溢出处理是一个常见的需求，特别是当我们在设计网页时，希望限制某段文字的显示长度，超出部分用省略号（...）表示。`text-overflow: ellipsis;` 是 CSS3 提供的一个样式属性，用于处理溢出的文本...
CSS省略号text-overflow超出溢出显示省略号
12-04
复制代码代码如下:<DIV xss=removed> <NOBR>就是比如有一行文字，很长，表格内一行显示不下</NOBR></DIV><DIV xss=removed> 就是比如有一行文字，很长，表格内一行显示不下.</DIV> 有时为了避免文
Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号
最新发布
smouns_的博客
05-10 856
Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
12-13
今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现，于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap （限制不换行） 和 overflow 属性为 hidden （隐藏溢出） 即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow:
多行文字text-overflow: ellipsis省略号失效问题
qq_51978639的博客
02-03 1295
设置了多行文字超出显示省略号的样式，省略号就是不生效，为此折腾了好久。 问题在于设置多行文字显示省略号时，只能指定显示的行数，不能设置高度
text-overflow:ellipsis 不显示省略号问题
GodLoveMe的博客
07-05 760
的原因，讲该元素设置为display:block就可以解决问题了。设置单行文字长度多长以省略号显示。结果发现没有发生作用。
文字溢出设置text-overflow:ellipsis后没有显示省略号
weixin_45440916的博客
09-26 1613
文本溢出隐藏：text-overflow：ellipsis；overflow：hidden；white-space：nowrap； 文本溢出隐藏后没有显示省略号，检查一番后原因是使用了display：flex；
无hack无js全兼容text-overflow-ellipsis效果
09-27
标题中的"无hack无js全兼容text-overflow-ellipsis效果"指的是在网页设计中实现文本溢出时显示省略号的效果，而且这个方法无需使用JavaScript（js）或任何黑客(hack)技巧，并且能够兼容各种浏览器。`text-overflow: ...
CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法
xiaolang85的专栏
07-09 2009
今天有朋友在52css.com的留言板提出一个问题：为什么 text-overflow:ellipsis的时候没有任何效果呀？text-overflow是一个比较特殊的属性，在CSS手册中，这个属性是这样定义的：　　语法： 　　text-overflow : clip | ellipsis  　　参数： 　　clip : 　不显示省略标记（...），而是简单的裁切　　（clip这个参数是不常用的！
css省略号方法及不显示问题修复
qq_40034690的博客
09-11 2874
文本溢出省略号方法及三段式无作用问题1、单行文本溢出（三段式）2、多行文本溢出显示省略号3、多行文本溢出省略号不显示的解决方法4、参考链接 1、单行文本溢出（三段式） 写完三段式记得写个宽度 overflow: hidden;//溢出隐藏 text-overflow:ellipsis;//溢出部分显示为省略号 white-space: nowrap;//不换行 2、多行文本溢出显示省略号 di...
文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？
杜永康的博客
12-06 4005
因为 text-overflow: ellipsis; 并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，就需要给 text-overflow: ellipsis; 配上两个个额外的属性：overflow 和 white-space。以以下代码为例： 效果图：值得一提的是，这个div如果给他设置高度，不管设置多少，从文本省略的显示角度来说，是无效的。因为以上方法，针对的仅仅是单行文本省略。如果要实现多行文本省略，请继续往下看：实现多行文本省略，同样的，我们需要用text-overflow: e
如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
weixin_33713350的博客
08-10 1655
如何使text-overflow:elipsis起作用？ 想要使用css属性text-overflow:elipsis起到作用，样式必须跟overflow:hidden; white-space:nowrap;width:150px;一起使用 1、text-overflow语法： text-overflow : clip | ellipsis 2、text-overflow参数说明： clip: ...
溢出文本显示为省略号的效果及其text-overflow:ellipsis;的使用
front_end_fan
08-23 669
语法： text-overflow : clip | ellipsis 参数： clip : 　不显示省略标记（…），而是简单的裁切 ellipsis : 　当对象内文本溢出时显示省略标记（…） 说明： 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。 text-overflow:ellipsis属性在FF中是没有效果的。示例： div { text-overflow : clip; }
text-overflow:ellipsis 文字超出省略号代替不起作用解决方法
热门推荐
HansExploration的博客
04-24 1万+
场景重现无效场景一现在我们来一个正常的例子&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html;charset=utf-8"&gt; &lt;meta name="viewport" content="width
php text 溢出,图文详解CSS文本溢出显示省略号效果（text-overflow）
weixin_36221149的博客
03-24 225
在工作中经常会遇到文本溢出，需要显示省略号的情况，那这个省略号是怎么实现的呢？这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号。对CSS文字溢出加省略号这个知识不熟悉的小伙伴可以参考一下，希望可以帮助到你！text-overflow属性表示当文本超出包含它的元素时，超出部分应该如何显示。写法：text-overflow ： clip | ellipsis属性值描述...
隐藏省略号html,css显示不全省略号怎么设置？
weixin_29373995的博客
06-03 909
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。css设置显示不全省略号的方法：单行文本(方法一)：语法：text-overflow : clip | ellipsis参数：clip : 　不显示省略标记(...)，而是简单的裁切 　　(clip这个参数是不常用的！)ellipsis ...
text-overflow: ellipsis;省略号颜色设置
06-01
要设置省略号的颜色，可以使用 ::after 伪元素来设置。具体的 CSS 代码如下： ```css .element { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值