多行溢出省略号，兼容版

作者: 忍不住的k | 来源:发表于2019-01-14 17:25 被阅读0次

多行溢出省略号，兼容版
溢出文字省略号
CSS实现单行和多行文本溢出显示省略号……
单行文本和多行文本省略号
CSS中文本省略号溢出控制小记
静态页面 P标签溢出隐藏
静态页面 P标签溢出隐藏
文本溢出隐藏展示省略号，单行、多行、半行
CSS 多行文本省略(兼容IE)
文字溢出加省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ellipsis {
            overflow: hidden;
            width: 100px;
            height: 200px;
            line-height: 25px;
            margin: 20px;
            border: 5px solid #AAA;
            font-size: 16px;
        }

        .ellipsis:before {
            content: "";
            float: left;
            width: 5px;
            height: 200px;
        }

        .ellipsis > *:first-child {
            float: right;
            width: 100%;
            margin-left: -5px;
        }

        .ellipsis:after {
            content: "\02026";

            box-sizing: content-box;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;

            float: right;
            position: relative;
            top: -25px;
            left: 100%;
            width: 3em;
            margin-left: -3em;
            padding-right: 5px;

            text-align: right;

            background-size: 100% 100%;
            /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);

            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);
        }

    </style>
</head>
<body>
<div class="ellipsis">
    <div>
        之前的实现中在文本未溢出的情况下，realend元素会出现在父元素的右侧，正如
        之前的实现中在文本未溢出的情况下，realend元素会出现在父元素的右侧，正如
     
    </div>
</div>


</body>
</html>