这个人有最好的解决办法。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;
}

如果你正在使用javascript，也许你可以像下面这样做。 然而，这并没有考虑到集装箱的高度…

// 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);

我在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

请检查下面的代码纯css技巧与适当的对齐，支持所有浏览器

.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); } <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>

增加-webkit-线夹:4;增加行数:

p { 显示： -网络套件盒; 最大宽度：200px; -网络套件线夹： 4; -网络套件盒方向：垂直; 溢出：隐藏; } <p>Lorem ipsum dolor sit amet， novum menandri adrivalrium 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，所以它目前只适用于少数浏览器。

删除重复的“显示”属性+删除不必要的“文本溢出:省略号”。

p{
line-height: 20px;
width: 157px;
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;
}

或者我们可以通过使用和高度和溢出来限制行。