zoukankan      html  css  js  c++  java
  • HTML(多行)文本超过部分隐藏,末尾显示(...)

    HTML(多行)文本超过部分隐藏,末尾显示(...)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML(多行)文本超过部分隐藏,末尾显示(...)</title>
        </head>
        <style>
            /* 一行 */
            .overline {
                max-width: 200px;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    
            /* 一行 */
            .overline1 {
                max-width: 200px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    
            /* 多行 */
            .overline2 {
                max-width: 200px;
                display: -webkit-box;
                -webkit-line-clamp: 2;/* 行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
        <body>
            <p class="overline">
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
            </p>
            
            <p class="overline1">
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
            </p>
    
            <p class="overline2">
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
                演示演示演示演示演示演示演示演示演示演示演示演示
            </p>
        </body>
    </html>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    elasticsearch 基础 —— 集群原理
    剑指 offer set 10 栈的压入、弹出序列
    剑指 offer set 9 包含min函数的栈
    剑指 offer set 8 树的子结构
    剑指 offer set 7 调整数组顺序使奇数位于偶数前面
    剑指 offer set 6 打印从 1 到 N 的所有数
    剑指 offer set 5 二进制中 1 的个数
    剑指 offer set 4 矩形覆盖
    剑指 offer set 3 旋转数组的最小数字
    剑指 offer set 2 从头到尾打印链表
  • 原文地址:https://www.cnblogs.com/antao/p/12185511.html
Copyright © 2011-2022 走看看