单行、多行省略号

87 阅读1分钟

单行

div {
            margin: 100px auto;
            width: 400px;
            height: 60px;
            background: #00f5;
            border: 1px solid #000;
            /* 关键代码 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

多行

div {
            margin: 100px auto;
            width: 400px;
            height: 70px;
            padding: 6px;
            background: #00f5;
            border: 1px solid #000;
            text-indent: 2em;
            /* 关键代码 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }