我知道您可以使用CSS规则的组合，使文本在溢出(超出父边界)时以省略号(…)结束。
是否有可能(请随意说，不)达到同样的效果，但让文本换行不止一行?
这是一个演示。
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本的宽度超过div的宽度时，文本以省略号结束。但是，仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断，这是省略号工作所必需的。
什么好主意吗?
附注:没有JS解决方案，如果可能的话，纯CSS。
当前回答
这是一个完全的hack，但它是有效的:
http://jsfiddle.net/2wPNg/
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: '...';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
它确实有问题....它可能会笨拙地切断一个字母，并且在响应式站点上可能会出现一些奇怪的结果。
其他回答
限制为少数行几乎在所有浏览器中都可以工作，但省略号(3点)将不会在Firefox和IE中显示。演示- http://jsfiddle.net/ahzo4b91/1/
div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
我不确定你是否看过这篇文章，但Chris coyer的优秀的CSS- tricks.com网站在不久前发布了一个链接，这是一个纯粹的CSS解决方案，实现了你想要的。
(按此在CodePen上查看)
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/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); } <div class="ellipsis"> <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解决方案意味着它也是一个相当复杂的解决方案，但它工作起来干净而优雅。我将假设Javascript是不可能的，因为这是更容易实现的(可以说是更可降解的)Javascript。
作为额外的奖励，有一个完整过程的可下载压缩文件(如果你想了解它的话)，还有一个SASS mixin文件，这样你就可以很容易地把它折叠到你的过程中。
希望这能有所帮助!
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
这是一个完全的hack，但它是有效的:
http://jsfiddle.net/2wPNg/
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: '...';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
它确实有问题....它可能会笨拙地切断一个字母，并且在响应式站点上可能会出现一些奇怪的结果。
我的解决方案重用amcdnl之一，但我的后退包括使用文本容器的高度:
.my-caption h4 {
display: -webkit-box;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;/* Fallback for non-webkit */
}
基于我在stackoverflow中看到的答案，我创建了这个LESS mixin(使用这个链接来生成CSS代码):
.max-lines(@lines: 3; @line-height: 1.2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
line-height: @line-height;
max-height: @line-height * @lines;
}
使用
.example-1 {
.max-lines();
}
.example-2 {
.max-lines(3);
}
.example-3 {
.max-lines(3, 1.5);
}
