首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

文字溢出隐藏以及和flex冲突的问题

在某些段落中,页面要求文字只显示一行,但是width固定,而文字过长,就会出现一个需求,超过长度限制的文字被隐藏且显示省略号,css 支持这样的属性。...单行文本溢出隐藏 div{ overflow: hidden;   white-space: nowrap;   text-overflow: ellipsis; } 多行文本溢出隐藏 div {...flex布局是前端写代码经常使用的一种布局方式,简单便捷且有效,但是在使用flex布局的元素中不能同时使用文字溢出隐藏,也就是两者不能同时出现在同一标签中。 这里,我们也有对应的解决办法。...只要保证flex布局和隐藏的样式不在同级元素中就可以,所以在文字外部多包裹一层标签。 可以采用下面这段代码的写法;

1.5K10
您找到你想要的搜索结果了吗?
是的
没有找到

overflow:hidden作用能治住塌陷_html溢出隐藏代码

一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。...style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*溢出隐藏... 效果如下: 一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。.../*只适用于单行文本*/ div{ width: 150px; background: skyblue; overflow: hidden; /*溢出隐藏*/...white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)*/ } 效果如下: 二.

1.8K30
领券