开发者社区云原生文章正文

overflow text-overflow 超过部分隐藏问题

2022-12-08 88

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： overflow text-overflow 超过部分隐藏问题

overflow:是针对容器内所有的数据溢出的一种统一处理方式,不管容器内的存储的是文本图片还是其他的数据统一取值; hidden隐藏, scroll滚动条显示,visible溢出显示

text-overflow:是专门针对盒子内的文本溢出时的处理方式,有裁剪clip ellipsis省略号以及 string 指定字符串来替换,

text-overflow如果取值是string 或ellipsis,那么overflow这个属性也必须要设置且必须为hidden,只有这样text-overflow才有效,因为tring 或ellipsis取值是建立在隐藏溢出部分的基础上的,替代符号都是在容器内显示的,不会在容器外显示,所以overflow也必须这样设置

文章标签：

容器

存储

torchstars

北原_春希

2天前

Web App开发前端开发 JavaScript

如何去掉溢出内容的overflow属性滚动条

北原_春希

5 1 1

小猫娃来啦

11月前

容器

文本溢出省略号text-overflow: ellipsis显示无效？这一属性到底该怎么用？

小猫娃来啦

99 0 0

汪末末

8月前

前端开发容器

CSS 溢出overflow属性的使用

CSS overflow属性

汪末末

135 0 0

编程达人

JavaScript

js:判断文本溢出隐藏生效text-overflow: ellipsis

编程达人

238 0 0

苏凉.py

前端开发

web前端-CSS(display，position，overflow和浮动float)

苏凉.py

115 0 0

_揽

容器

overflow属性详解

overflow是对溢出内容的处理

_揽

313 0 0

程序边界

容器

【已解决】text-overflow: ellipsis；不生效（除了white-space:nowrap；overflow: hidden；之外）

text-overflow: ellipsis；不生效（除了white-space:nowrap；overflow: hidden；之外）

程序边界

850 0 0

黛琳ghz

前端开发

每日一学—CSS overflow与text-overflow与white-space属性

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。white-space属性指定元素内的空白怎样处理。

黛琳ghz

242 0 0