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

    效果如下:

  • 相关阅读:
    唯一的确定一棵二叉树
    Educational Codeforces Round 55 (Rated for Div. 2)
    524 (Div. 2) Masha and two friends
    单链表实现n(n≥20)的阶乘
    表达式的后缀表示
    UPCOJ2012 The King’s Walk(dp)
    第七届山东省省赛D Swiss-system tournament(归并排序)
    第七届山东省省赛C Proxy(最短路)
    hihocoder1185 连通性·三
    hihocoder1184 连通性二·边的双连通分量
  • 原文地址:https://www.cnblogs.com/MissBean/p/ellipsis.html
Copyright © 2011-2022 走看看