zoukankan      html  css  js  c++  java
  • 单行文本溢出和多行文本溢出

    1.单行文本溢出需要满足三个条件:

      overflow:hidden;     white-space:nowrap;  text-overflow:ellipsis;

    2.多行文本溢出需要满足下面几个条件:

      display:-webkit-box; overflow:hidden;

      text-overflow:ellipsis; word-break:break-all;

      -webkit-box-orient:vertical; //子元素应该被水平或垂直排列

      -webkit-line-clamp:3;  //3行后显示省略号

    例子如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>h5</title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .inoneline {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .intwoline {
            display: -webkit-box;
            overflow: hidden;
    
            text-overflow: ellipsis;
            word-break:break-all;
    
            -webkit-box-orient: vertical; 
            -webkit-line-clamp:3;
        }
    </style>
    <body>
        <div class="inoneline">世界很小
    我陪你去到天涯海角在没有烦恼的角落里停止寻找在无忧无虑的时光里慢慢变老</div>
        <div class="intwoline">一次就好我带你去看天荒地老在阳光灿烂的日子里开怀大笑在自由自在的空气里吵吵闹闹
    你可知道我会你的想要世界很小我陪你去到天涯海角在没有烦恼的角落里停止寻找在无忧无虑的时光里慢慢变老你可知道我全部的心跳随你跳一次就好我带你去看天荒地老在阳光灿烂的日子里开怀大笑在自由自在的空气里吵吵闹闹你可知道我会你的想要</div>
    </body>
    </html>
    View Code

    效果如下:

  • 相关阅读:
    基于Grafana+SimpleJson的灵活报表解决方案
    Scala安装时的坑
    Windows批量添加防火墙例外端口
    VMware与Hyper-V
    InfluxDB:cannot use field in group by clause
    .Net版InfluxDB客户端使用时的一些坑
    KafkaManager中Group下不显示对应Topic的解决方案
    Linux下查看Go语言软件运行情况
    Flink升级到1.4版本遇到的坑
    spring cloud(一)带你进入分布式
  • 原文地址:https://www.cnblogs.com/MissBean/p/ellipsis.html
Copyright © 2011-2022 走看看