zoukankan      html  css  js  c++  java
  • css实现超出文本溢出用省略号代替

    一、单行

    实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用overflow: hidden; white-space: nowrap这两个属性使用才能达到效果。

    注意:

    • 这里如果用了flex布局的话,text-overflow:ellipsis将会失效;
    • 还有一个问题就是,关于 display:inline 和 display:hidden 一起使用 display:hideen 会失效的问题,因为display:inline,会让元素的宽度/高度失效,标签中有多少内容,标签就是多宽.所以当要将元素变为行内元素又要隐藏超出部分的内容时,可以用 display:inline-block 代替 display:inline;
    • 再一个就是,display:inline-block 加上 overflow:hidden 会导致元素塌陷,解决办法有两种,1.浮动,然后清除浮动;2.给加了display属性的元素加vertical-align:bottom(个人推荐使用),或者vertical-align:top

    如下:

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    效果:

    二、多行

    不考虑兼容性,适用于Webkit浏览器内核

    css代码:

      display:-webkit-box;

      -webkit-box-orient:vertical;

      -webkit-box-clamp:3 //截取第三行

      overflow:hidden;

    效果:

  • 相关阅读:
    hrbust1279
    U盘快捷方式中毒处理办法
    计算几何
    poj1113
    凸包模版
    STL容器
    HDU2048
    HDU2047
    HDU2045
    python面试题总结
  • 原文地址:https://www.cnblogs.com/Awen71815iou/p/11163629.html
Copyright © 2011-2022 走看看