将省略号应用于多行文本
是否有一个解决scheme添加省略号最后一行的stream体高度（20％）的div内？
我在CSS中find了-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/
如果你想将省略号（…）应用于单行文本 ，那么CSS使得text-overflow属性变得容易一些。 它仍然有点棘手（由于所有的要求 – 见下文），但text-overflow使其成为可能和可靠。
但是，如果您想在多行文本上使用省略号（就像这里的情况一样），那么不要指望有什么乐趣。 CSS没有这样做的标准方法，并且变通方法被击中和错过。
省略单行文本
对于text-overflow ，省略号可以应用于单行文本。 必须满足以下CSS要求：
- 必须有一个
width，max-width或flex-basis - 必须有
white-space: nowrap - 必须具有除
visible以外的值的overflow - 必须
display: block或inline-block（或function等效项，如flex项目）。
所以这将工作：
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>
不幸的是，目前的CSS状态没有。
省略号渲染具有先决条件white-space:nowrap ，这实际上意味着：省略号仅在单行文本容器上绘制。
我终于find了一个解决scheme来做我想做的事情。 作为一个paragraphe和article封装。 如果要根据article高度（也取决于窗口高度）将p省略号应用于p ，则需要获取article line-height ， p的line-height ，然后使用articleHeight/lineHeight来查找行的数量，然后可以dynamic添加的line-clamp 。
唯一的事情是line-height应该在css文件中声明。
检查下面的代码。 如果改变窗口的高度， line-clamp将会改变。 可以很好地创build一个旨在做到这一点的插件。
的jsfiddle
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>
请检查此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>
这个人有最好的解决scheme。 只有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解决scheme：
这样做的工作方式是绝对定位一个视口低于可视区域的一个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中testing过了。
你可以看看这里： http : //codepen.io/puopg/pen/vKWJwK
用CSS魔法你甚至可以缓解这个angular色的突然中断。
编辑：我想这个强加的一件事是断字：断开，否则内容不会延伸到视口的最后。 🙁
经过多次尝试后，我终于用混合的js / css来处理多行和单行溢出。
CSS3代码：
.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 }
我只是用js代码检查divs溢出，像这样：
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'); } }
html中的用法示例：
<div class="towrap"> <h4> <a class="forcewrap multiline" href="/some/ref">Very long text</a> </h4> </div>
只需增加-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>
我想出了我自己的解决scheme：
/*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)*$/, '...'); }); } }); }
坏CSS不支持跨浏览器多行夹持，只有webkit似乎推动它。
你可以尝试在github上使用像Ellipsity这样简单的Javascript省略号库，源代码非常干净而且很小，所以如果你需要做任何额外的修改，它应该很容易。
可能是这可以帮助你们。 多行椭圆与工具提示hover。 https://codepen.io/Anugraha123/pen/WOBdOb
<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>
那么你可以使用CSS3中的线钳function。
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; }
确保你改变了你自己的设置。
