zoukankan      html  css  js  c++  java
  • CSS单行、多行文本溢出部分省略号代替

    单行文本溢出显示省略号

    p {
        overflow: hidden;  /*超出部分隐藏*/
        text-overflow: ellipsis;  /*超出部分文字以...显示*/  
        white-space: nowrap;  /*不换行*/
    }

    多行文本溢出显示省略号(只有-webkit内核才有作用)

    p {
        isplay: -webkit-box;
        text-overflow: ellipsis;
        overflow : hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;            
    }

    移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端:

    • -webkit-line-clamp:用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
    • display: -webkit-box:将对象作为弹性伸缩盒子模型显示 。
    • -webkit-box-orient:设置或检索伸缩盒对象的子元素的排列方式 。
    • text-overflow: ellipsis:以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。
  • 相关阅读:
    Muddy Fields
    LightOJ 1321
    LightOJ 1085
    LightOJ 1278
    LightOJ 1341
    LightOJ 1340
    vijos 1426 背包+hash
    vijos 1071 01背包+输出路径
    vijos 1907 DP+滚动数组
    vijos 1037 背包+标记
  • 原文地址:https://www.cnblogs.com/tangxuliang/p/9106538.html
Copyright © 2011-2022 走看看