zoukankan      html  css  js  c++  java
  • overflow(超出部分省略号)

    overflow(超出部分省略号)

    一、总结

    一句话总结:

    一行超出或者两行超出最主要是使用overflow属性(hidden值隐藏),可以设置text-overflow来设置文字溢出部分为省略号(ellipsis)

    二、overflow(超出部分省略号)

    转自或参考:overflow(超出部分省略号)
    https://www.cnblogs.com/xiangru0921/p/6501074.html

    溢出:
    overflow:visible/hidden/scroll/auto/inherit;

    visible:默认值、不剪切。
    hidden:超出部分剪切、没有滚动条。
    scroll:超出部分有滚动条。
    auto:自适应,有滚动条。
    inherit:继承父元素的overflow得值。

    空余空间:
    white-space:pre/pre-wrap/nowrap/pre-line/inherit;

    pre:识别回车和空格、不换行。
    pre-wrap:识别回车和空格、换行。
    nowrap:不识别回车和空格、不换行。
    pre-line:识别回车、不识别空格、识别换行。
    inherit:继承父元素的white-space属性。


    实例:
    (1)单行实现省略号:

    valve;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipse;

    (2)

    可以不要设置高 自适应 别忘了overflow:hidden;

    .box{
       100%;
    // height: .70rem;
    // line-height: .36rem;
      margin: .2rem 0 .4rem;
      font-size: .28rem;
      overflow: hidden;
    }

    //超出部分隐藏(可设置多行之后省略号)

    //两行超出隐藏
    .overhide {
      display: -webkit-box !important;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    //一行超出隐藏
    .overhideline1 {
      display: -webkit-box !important;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
     
  • 相关阅读:
    AOP-面向切面编程-1
    记一次付工解决Sqlserver问题的过程
    Mysql ---Sqlserver数据迁移到Mysql(Mysql建表迁移数据)
    Mysql ---部署,创建用户
    【C++】C++未定义行为
    【C++】回看面向对象与C++
    【作业】2017级面向对象程序设计——总结作业
    【笔记】Cocos2dx学习笔记
    【个人】绝地求生—吃豆人
    【团队】汇总博客
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12216268.html
Copyright © 2011-2022 走看看