html两行溢出省略号,html – 两行上的文本溢出省略号

我不知道如果你已经看到

THIS，但克里斯Coyier的出色的CSS-Tricks.com发布了一个链接到这一段时间，它是一个纯CSS解决方案，完成你所寻求的。

HTML：

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.

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: "\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/xhBQAAAwBQTFRFAAAAwDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+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。

作为一个额外的好处，有一个downloadable zip file的完整的过程(如果你想了解它和所有)，而且一个SASS mixin文件，以便你可以将它折叠到你的过程容易peasy。

希望这可以帮助！