两行文字溢出省略号

两行文字溢出省略号

我不确定您是否看过 THIS，但是ChrisCoyier出色的CSS-Tricks.com早已发布了指向该链接的链接，它是一个纯CSS解决方案，可以完全满足您的要求。

HTML：

<div >    <div>        <p> Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off – then, I account it high time to get to sea as soon as I can.        </p>    </div></div>

CSS：

html,body,p {    margin: 0;    padding: 0;    font-family: sans-serif;}.ellipsis {    overflow: hidden;    height: 200px;    line-height: 25px;    margin: 20px;    border: 5px solid #AAA;}.ellipsis:before {    content: "";    float: left;    width: 5px;    height: 200px;}.ellipsis > *:first-child {    float: right;    width: 100%;    margin-left: -5px;}.ellipsis:after {    content: "2026";    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%;    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);    }

当然，单纯的CSS解决方案意味着它也是一个相当复杂的解决方案，但是它可以干净利落地工作。我将认为Javascript是不可能的，因为使用Javascript更容易实现（并且可能更可降解）。

此外，还有一个完整过程的可下载zip文件（如果您想了解所有内容），还有一个SASS mixin文件，以便您可以轻松将其折叠到过程中。