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

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

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

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

    CSS 样式控制溢出的数据 省略号隐藏

    https://blog.csdn.net/u011415782/article/details/79011399 § 背景 近日,在规整界面时,发现有的文字因为长度和行数总是显得不尽如人意,如果考虑到用户在输入文字的随意性因素...,就更需要前端进行文字 显示效果的限制了. ♩ a 标签限制行数 一般是控制a 标签单行显示时,多余的文字以省略号代替 .a-article-recommend{ width:100%;...♪ p 标签限制行数 CSS实现单行、多行文本溢出显示省略号(…) .p-article-abstract{ display: -webkit-box; -webkit-box-orient...可参考:CSS实现文章 ♫ div 限制高度 隐藏溢出的内容 有时因为div中的内容过多,会叠加显示,造成布局的混乱,这种情况下,可以尝试进行下面的限制. .div-article-view{

    99930

    前端正确处理“文字溢出”的思路

    ---- 一.组件效果预览 单行文字溢出时自动省略,并且不保留后缀。 单行文字溢出时自动省略,并且保留后缀。 多行文字溢出时,然后再开始省略。这个情况是我们项目中比较特殊的场景。...简单来说就是假设我现在想让文字显示两行,如果两行的时候没有溢出,那么正常显示。如果两行情况下还是溢出了,那么我再去处理溢出文字。...它其实是在你处理过溢出场景之后,帮你做对于文字溢出的的二次特殊处理。当你对于页面溢出做没有任何操作时,这个属性其实是无效的。(注意:它仅仅只处理文字溢出的场景。)...首先你要知道,其实我们 web 页面的换行,并不是毫无意义的自己就换行了,而是都有一个隐藏的换行符,你可以把这个隐藏的换行符浅浅的理解为 white-space(空格)。...效果如下: 可以看到,我们省略了那个隐藏的换行符,所以文字不会自动换行了,那么整段文字都显示到了一行上。

    71840
    领券