• 实现单行或多行文本溢出后隐藏并显示省略号


    最近写项目遇到一个关于文本溢出隐藏并显示省略号的问题,通过查询文档以及阅读了一些博文之后获益不少,特此记录:

    1.单行文本溢出隐藏:

    先给出实际效果图:

    当文本长度超出一行的宽度时,会自动隐藏溢出文字并且最后显示'...'提示用户。

    实现方法:

    纯css样式:

    复制代码
    <style>
    p{
    text-overflow: ellipsis;//必须
    white-space: nowrap;//必须
    overflow: hidden;//必须
    }
    </style>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
            natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores, aliquid, possimus iste.</p>
    </body>       
    复制代码

    上面为p标签设置的3个css属性是必须,缺一不可,其中:

    text-overflow:定义文本溢出时如何处理,有2个有效值:

    1. clip:当内联内容溢出块容器时,将溢出部分裁切掉。
    2. ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...)。 

    2.多行文本溢出隐藏:

    实际效果图:

    这里有两行文本,第二行文本溢出时,隐藏超出文本并显示'...'

    与单行文本不同的是,这里不能使用上面的text-overflow属性,这里使用webkit内核浏览器专用方法,所以可以用在移动端。代码:

    复制代码
    <style>
    p {
    overflow: hidden;//必须
    display: -webkit-box;//必须
    -webkit-line-clamp: 2;//必须
    -webkit-box-orient: vertical;//必须
    }
    </style>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
            natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores, aliquid, possimus iste.</p>
    </body>
    复制代码

    上面代码中:

    1. -webkit-line-clamp:设置文本最多显示行数。
    2. -webkit-box-orient:不设置将不显示省略号(...)。

    如果要兼容其他浏览器,没有很简单的方法,详情戳下方 SO 链接。

    转载:

    With CSS, use “…” for overflowed block of multi-lines 

    http://www.cnblogs.com/zhunrong/p/6628828.html

  • 相关阅读:
    分布式事务解决方案
    数据库和缓存双写一致性解析
    RabbitMQ 分区脑裂处理策略
    RabbitMQ实现延迟队列
    RabbitMQ高可用原理
    PyTorch Lightning工具学习
    【数学知识拾贝】模式识别所需要的线性代数知识总结
    【深度强化学习】1. 基础部分
    给内容打标签
    前端性能优化有哪些点
  • 原文地址:https://www.cnblogs.com/xianshenglu/p/8110102.html
Copyright © 2020-2023  润新知