两行文本溢出省略号
我知道你可以使用CSS规则的组合来使文本以省略号（…）结尾，当它溢出（离开父界）时。
是否有可能（只是说，不），以达到相同的效果，但让文本换行不止一行？
这是一个演示 。
div { width: 300px; height: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 正如你所看到的，当它比div的宽度更宽时，文本以省略号结束。 然而，文本仍然有足够的空间在第二行包装并继续。 这被省略号工作所需white-space: nowrap所中断。
有任何想法吗？
PS：没有JS解决scheme，如果可能，纯CSS。
我不确定你是否看过这个 ，但是Chris Coyier出色的CSS-Tricks.com发布了一个链接，这是一个纯粹的CSS解决scheme，完全符合你的要求。
（点击查看CodePen）
HTML：
<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：
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); }
当然，作为一个纯粹的CSS解决scheme意味着它也是一个非常复杂的，但它干净，优雅地工作。 我会假设Javascript是不可能的，因为用Javascript实现（而且可以说更容易降解）要容易得多。
作为一个额外的好处，有一个完整的过程（如果你想了解它和一个可下载的zip文件 ），而且还有一个SASS混音文件，以便您可以折叠到您的过程容易peiness。
希望这可以帮助！
简单的CSS属性可以做到这一点。 以下是（说）三行省略号。
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
看看这个纯CSS版本： http : //codepen.io/martinwolf/pen/qlFdp
display: block; display: -webkit-box; max-width: 400px; height: 109.2px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.625; text-overflow: ellipsis;
这是一个彻头彻尾的黑客，但它的工作原理：
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; }
它确实有问题….它可能会阻塞一个笨拙的信件，它可能会在响应网站上有一些奇怪的结果。
我的解决scheme重用了一个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 */ }
text-overflow: ellipsis; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 36px; max-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
我发现了一个线夹和线条高度的组合：D
根据我在stackoveflow中看到的答案，我创build了这个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); }
这是一个简单的脚本来pipe理使用jQuery的省略号。 它检查元素的真实高度，并创build隐藏的原始节点和截断的节点。 当用户点击它时，在两个版本之间切换。
其中一个很大的好处就在于，“省略号”如预期的那样接近了最后一个字。
如果您使用纯粹的CSS解决scheme，那么这三个点就显得远离最后一个词。
function manageShortMessages() { $('.myLongVerticalText').each(function () { if ($(this)[0].scrollHeight > $(this)[0].clientHeight) $(this).addClass('ellipsis short'); }); $('.myLongVerticalText.ellipsis').each(function () { var original = $(this).clone().addClass('original notruncation').removeClass('short').hide(); $(this).after(original); //debugger; var shortText = ''; shortText = $(this).html().trim().substring(0, 60) + '...'; $(this).html(shortText); }); $('.myLongVerticalText.ellipsis').click(function () { $(this).hide(); if ($(this).hasClass('original')) { $(this).parent().find('.short').show(); } else { $(this).parent().find('.original').show(); } }); } manageShortMessages();
div { border:1px solid red; margin:10px; } div.myLongVerticalText { height:30px; width:450px; } div.myLongVerticalText.ellipsis { cursor:pointer; } div.myLongVerticalText.original { display:inline-block; height:inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="myLongVerticalText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada. Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt. </div> <div class="myLongVerticalText"> One Line Lorem ipsum dolor sit amet. </div> </body>
不知道你的目标是什么，但是你想让文字出现在第二行吗？
这里是你的jsFiddle： http : //jsfiddle.net/8kvWX/4/只是删除以下内容：
white-space:nowrap;
林不知道这是否是你正在寻找或不。
问候，
眉
