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;
    }
     
  • 相关阅读:
    angular4(2-1)angular脚手架引入第三方类库(jquery)
    angular4(1)angular脚手架
    vue-cli中的ESlint配置文件eslintrc.js详解
    咕着的题(慢慢补吧)
    图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
    乐视手机H5项目总结
    解决ios下的微信打开的页面背景音乐无法自动播放
    html2canvas手机端模糊问题
    H5 canvas绘制出现模糊的问题
    hammer.js中文文档
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12216268.html
Copyright © 2011-2022 走看看