• 如何让多文本内容只显示一行,其余用省略号来显示


    在此需要用到三个属性配合使用:

    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分省略号显示*/
    实例:
    <p>
    兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦
    既然不是毛毛虫 就要壮烈的扑火 短暂青春要像 烟火
    </p>
    css代码:
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    p{
         100px;
        height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }
    </style>

    效果如下:

  • 相关阅读:
    2021 发工资咯:)
    HDU-2021
    HDU-2020
    HDU-2019
    HDU-2018
    HDU-2017
    HDU-2016
    HDU-2015
    HDU-2014
    HDU-2013
  • 原文地址:https://www.cnblogs.com/bluealine/p/12760966.html
Copyright © 2020-2023  润新知