css实现文字截断

    团队，你好我是詹姆士你好我是詹姆士邦德你好我是詹姆士邦德你好我是詹姆士邦德你好我是詹姆士邦德你好我是詹姆士邦德你好我是詹姆士邦德邦德

一、单行文字截断

.container {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

image.png

二、多行文字截断

方法一

.container {
            width: 200px;
            border: 1px solid red;
            position: relative;
            line-height: 18px;
            height: 36px;
            overflow: hidden;
        }
        .container::after {
            content: "...";
            font-weight:bold;
            position:absolute;
            bottom:0;
            right:0;
            padding: 0 20px 1px 45px;
            /* 为了展示效果更好 */
            background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
            background: -moz-linear-gradient(to right, rgba(255,255,255,0), white 50%, white);
            background: -o-linear-gradient(to right, rgba(255,255,255,0), white 50%, white);
            background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
            background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        }

image.png

此方法兼容性较好。

方法二

.container {
            width: 200px;
            text-overflow: ellipsis; /*有些示例里需要定义该属性，实际可省略*/
            display: -webkit-box;
            -webkit-line-clamp: 3;/*规定超过两行的部分截断*/
            -webkit-box-orient: vertical;
            overflow : hidden;
            word-break: break-all;/*在任何地方换行*/
            border: 1px solid red;
        }

image.png

此方法在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面兼容性比较好。