有没有解决方案在div中的最后一行添加省略号，流体高度（20％）？
我在CSS中找到了-webkit-line-clamp函数，但在我的情况下，行号将取决于窗口大小。
p {
width:100%;
height:20%;
background:red;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>我有这个JSFiddle来说明这个问题。 https://jsfiddle.net/96knodm6/
如果要将省略号（...）应用于单行文本，则使用text-overflow属性可以使CSS更容易。它仍然有点棘手（由于所有要求 - 见下文），但text-overflow使它成为可能和可靠。
但是，如果你想在多行文字上使用省略号 - 就像这里的情况那样 - 那么不要期望有任何乐趣。 CSS没有标准的方法来执行此操作，并且解决方法很容易被击中。
使用text-overflow，省略号可以应用于单行文本。必须满足以下CSS要求：
width，max-width或flex-basiswhite-space: nowrapoverflow与visible以外的值display: block或inline-block（或功能等同物，如弹性项目）。所以这将有效：
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}<p>
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>但是，尝试删除width，或让overflow默认为visible，或删除white-space: nowrap，或使用块容器元素以外的东西，并且省略号失败。
这里有一个很大的好处：text-overflow: ellipsis对多行文字没有影响。 （单独的white-space: nowrap要求消除了这种可能性。）
p {
width: 200px;
/* white-space: nowrap; */
height: 90px; /* new */
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}<p>
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>由于CSS在多行文本上没有省略号的属性，因此创建了各种变通方法。其中有几种方法可以在这里找到：
上面的Mobify链接已被删除，现在引用了archive.org副本，但似乎是在this codepen中实现的。
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>我想出了自己的解决方案：
/*this JS code puts the ellipsis (...) at the end of multiline ellipsis elements
*
* to use the multiline ellipsis on an element give it the following CSS properties
* line-height:xxx
* height:xxx (must line-height * number of wanted lines)
* overflow:hidden
*
* and have the class js_ellipsis
* */
//do all ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});
//redo ellipsis when window resizes
var re_ellipsis_timeout;
jQuery( window ).resize(function() {
//timeout mechanism prevents from chain calling the function on resize
clearTimeout(re_ellipsis_timeout);
re_ellipsis_timeout = setTimeout(function(){ console.log("re_ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});
//the main function
function put_ellipsisses(){
jQuery(".js_ellipsis").each(function(){
//remember initial text to be able to regrow when space increases
var object_data=jQuery(this).data();
if(typeof object_data.oldtext != "undefined"){
jQuery(this).text(object_data.oldtext);
}else{
object_data.oldtext = jQuery(this).text();
jQuery(this).data(object_data);
}
//truncate and ellipsis
var clientHeight = this.clientHeight;
var maxturns=100; var countturns=0;
while (this.scrollHeight > clientHeight && countturns < maxturns) {
countturns++;
jQuery(this).text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
});
}
可能这可以帮助你们。具有工具提示悬停的多行省略号。 qazxsw poi
https://codepen.io/Anugraha123/pen/WOBdOb
请检查下面的代码，了解适用于所有浏览器的正确对齐的纯css技巧
<div>
<p class="cards-values">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
</p>
<span class="tooltip"></span>
</div>
.
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 103px;
text-align: justify;
padding: 15px;
}
.block-with-text:after {
content: '...';
position: absolute;
right: 15px;
bottom: -4px;
background: linear-gradient(to right, #fffff2, #fff, #fff, #fff);
}
经过多次尝试，我最终得到了一个混合的js / css来处理多行和单行溢出。
CSS3代码：
<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>
我只是用js代码检查div上的溢出，如下所示：
.forcewrap { // single line ellipsis
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
-moz-binding: url( 'bindings.xml#ellipsis' );
white-space: nowrap;
display: block;
max-width: 95%; // spare space for ellipsis
}
.forcewrap.multiline {
line-height: 1.2em; // my line spacing
max-height: 3.6em; // 3 lines
white-space: normal;
}
.manual-ellipsis:after {
content: "\02026"; // '...'
position: absolute; // parent container must be position: relative
right: 10px; // typical padding around my text
bottom: 10px; // same reason as above
padding-left: 5px; // spare some space before ellipsis
background-color: #fff; // hide text behind
}
html中的用法示例：
function handleMultilineOverflow(div) {
// get actual element that is overflowing, an anchor 'a' in my case
var element = $(div).find('a');
// don't know why but must get scrollHeight by jquery for anchors
if ($(element).innerHeight() < $(element).prop('scrollHeight')) {
$(element).addClass('manual-ellipsis');
}
}
对于糟糕的CSS不支持跨浏览器多线钳位，只有webkit似乎在推动它。
您可以尝试在github上使用像Ellipsity这样的简单Javascript省略库，源代码非常干净小，所以如果您需要进行任何其他更改，它应该非常简单。
<div class="towrap">
<h4>
<a class="forcewrap multiline" href="/some/ref">Very long text</a>
</h4>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
/* styles for '...' */
.block-with-text {
width: 50px;
height: 50px;
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
</style>
</head>
<body>
a
<div class="block-with-text">g fdsfkjsndasdasd asd asd asdf asdf asdf asdfas dfa sdf asdflk jgnsdlfkgj nsldkfgjnsldkfjgn sldkfjgnls dkfjgns ldkfjgn sldkfjngl sdkfjngls dkfjnglsdfkjng lsdkfjgn sdfgsd</div>
<p>This is a paragraph.</p>
</body>
</html>
那么你可以在CSS3中使用线钳功能。
You can achieve this by a few lines of CSS and JS.
CSS:
div.clip-context {
max-height: 95px;
word-break: break-all;
white-space: normal;
word-wrap: break-word; //Breaking unicode line for MS-Edge works with this property;
}
JS:
$(document).ready(function(){
for(let c of $("div.clip-context")){
//If each of element content exceeds 95px its css height, extract some first
//lines by specifying first length of its text content.
if($(c).innerHeight() >= 95){
//Define text length for extracting, here 170.
$(c).text($(c).text().substr(0, 170));
$(c).append(" ...");
}
}
});
HTML:
<div class="clip-context">
(Here some text)
</div>
确保您更改自己的设置。
在浏览了整个互联网并尝试了很多这些选项之后，确保它被正确覆盖的唯一方法是通过javascript，我创建了一个循环函数来检查需要多行截断的帖子项。
*注意我使用了Jquery，并要求你的post__items类具有固定的最大高度。
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 25px;
height: 52px;
max-height: 52px;
font-size: 22px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
请检查此css以获取省略号到多行文本
body {
margin: 0;
padding: 50px;
}
/* mixin for multiline */
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 6em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.block-with-text:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
}<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>// loop over post items
$('.post__items').each(function(){
var textArray = $(this).text().split(' ');
while($(this).prop('scrollHeight') > $(this).prop('offsetHeight')) {
textArray.pop();
$(this).text(textArray.join(' ') + '...');
}
});
或者我们可以通过使用和高度和溢出来限制行。
我的解决方案适用于多行省略号：
p{
line-height: 20px;
width: 157px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
如果您使用的是javascript，也许您可以执行以下操作。但是，这并不考虑容器的高度......
.crd-para {
color: $txt-clr-main;
line-height: 2rem;
font-weight: 600;
margin-bottom: 1rem !important;
overflow: hidden;
span::after {
content: "...";
padding-left: 0.125rem;
}
}
试试这个简单的方法。我在这里也有// whatever string
const myString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.';
// you can set max string length
const maxStrLength = 100;
const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString;
console.log(truncatedString);链接。
这是jsfiddle有重要作用。此属性的值决定了可见的行数。
CSS PART
-webkit-line-clampHTML PART
h3{
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px 30px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
如果您还有多个元素，并且想要在省略号后面有更多按钮的链接，请查看<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
如果你想要这样的东西：
每个月前10 TB都不收取费用。所有其他交通...阅读更多
优点： +跨浏览器（IE11，Edge，Chrome，Firefox，Safari等） +最自然的外观
缺点： - 向DOM添加许多额外元素
我对我见过的任何变通办法都不满意。他们中的大多数使用线夹，目前仅在webkit中支持。所以我一直玩弄它直到我想出一个解决方案。这个纯粹的JavaScript解决方案应该与IE10及更高版本和所有现代浏览器兼容。这在下面的stackoverflow示例空间之外未经过测试。
我认为这是一个很好的解决方案。一个重要的警告是它为容器内的每个单词创建了一个跨度，这将影响布局性能，因此您的里程可能会有所不同。
https://stackoverflow.com/a/51418807/10104342
//This is designed to be run on page load, but if you wanted you could put all of this in a function and addEventListener and call it whenever the container is resized.
var $container = document.querySelector('.ellipses-container');
//optional - show the full text on hover with a simple title attribute
$container.title = $container.textContent.trim();
$container.textContent.trim().split(' ').some(function (word) {
//create a span for each word and append it to the container
var newWordSpan = document.createElement('span');
newWordSpan.textContent = word;
$container.appendChild(newWordSpan);
if (newWordSpan.getBoundingClientRect().bottom > $container.getBoundingClientRect().bottom) {
//it gets into this block for the first element that has part of itself below the bottom of the container
//get the last visible element
var containerChildNodes = $container.childNodes;
var lastVisibleElement = containerChildNodes[containerChildNodes.length - 2];
//replace this final span with the ellipsis character
newWordSpan.textContent = '\u2026';
//if the last visible word ended very near the end of the line the ellipsis will have wrapped to the next line, so we need to remove letters from the last visible word
while (lastVisibleElement.textContent != "" && newWordSpan.getBoundingClientRect().bottom > $container.getBoundingClientRect().bottom) {
lastVisibleElement.style.marginRight = 0;
lastVisibleElement.textContent = lastVisibleElement.textContent.slice(0, -1);
}
//using .some() so that we can short circuit at this point and no more spans will be added
return true;
}
});.multi-line-container {
border: 1px solid lightgrey;
padding: 4px;
height: 150px;
width: 300px;
}
.ellipses-container {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start; /* optionally use align-content:stretch, the default, if you don't like the extra space at the bottom of the box if there's a half-line gap */
overflow: hidden;
position: relative;
}
.ellipses-container > span {
flex: 0 0 auto;
margin-right: .25em;
}
.text-body {
display: none;
}我终于找到了做我想做的解决方案。作为p一个paragraphe和article的包装。如果你想根据p高度（也取决于窗口高度）将省略号应用到article，你需要得到height的article，line-height的p然后articleHeight/lineHeight找到可以动态添加的line-clamp的数量然后。
唯一的问题是line-height应该在css文件中声明。
请检查以下代码。如果更改窗口的高度，line-clamp将会改变。可以很好地创建一个旨在实现这一目标的插件。
function lineclamp() {
var lineheight = parseFloat($('p').css('line-height'));
var articleheight = $('article').height();
var calc = parseInt(articleheight/lineheight);
$("p").css({"-webkit-line-clamp": "" + calc + ""});
}
$(document).ready(function() {
lineclamp();
});
$( window ).resize(function() {
lineclamp();
});article {
height:60%;
background:red;
position:absolute;
}
p {
margin:0;
line-height:120%;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>只需增加-webkit-line-clamp：4;增加行数
p {
display: block;
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>线夹是一种专有的无证件CSS（webkit）：https://caniuse.com/#feat=css-line-clamp，所以它目前只适用于少数浏览器。
这个man有最好的解决方案。只有css：
.multiline-ellipsis {
display: block;
display: -webkit-box;
max-width: 400px;
height: 109.2px;
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
我刚刚用这个概念玩了一下。基本上，如果你可能有一个像素左右切断你的最后一个字符，这里是一个纯粹的CSS和HTML解决方案：
这种方法的工作方式是将div绝对定位在视口的可视区域下方。随着内容的增长，我们希望div可以偏移到可见区域。如果内容增长太多，我们的div将偏移太高，因此上限我们的内容可以增长。
HTML：
<div class="text-container">
<span class="text-content">
PUT YOUR TEXT HERE
<div class="ellipsis">...</div> // You could even make this a pseudo-element
</span>
</div>
CSS：
.text-container {
position: relative;
display: block;
color: #838485;
width: 24em;
height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like 'j'
overflow: hidden;
white-space: normal;
}
.text-content {
word-break: break-all;
position: relative;
display: block;
max-height: 3em; // This prevents the ellipsis element from being offset too much. It should be 1 line height greater than the viewport
}
.ellipsis {
position: absolute;
right: 0;
top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
text-align: left;
background: white;
}
我在Chrome，FF，Safari和IE 11中对此进行了测试。
你可以在这里查看：http://codepen.io/puopg/pen/vKWJwK
你甚至可以通过一些CSS魔法来缓解角色的突然切断。
编辑：我想这有一个问题就是分词：break-all，否则内容不会延伸到视口的最后。 :(
不幸的是没有CSS的当前状态。
省略号渲染具有先决条件white-space:nowrap，这实际上意味着：省略号仅在单行文本容器上绘制。
用户这个公式：
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //put number of line here
我看了一下YouTube如何在他们的主页上解决它并简化它：
.multine-ellipsis {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
这将允许2行代码，然后附加省略号。
要点：https://gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b