将省略号应用于多行文本
Applying an ellipsis to multiline text
是否有解决方案可以在具有流体高度 (20%) 的 div 中的最后一行添加省略号？
我在 CSS 中找到了 -webkit-line-clamp 函数，但在我的例子中，行号将取决于 window 大小。
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
- 必须有
overflow 且值不是 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 没有 属性 用于多行文本的省略号，因此已创建各种解决方法。可以在此处找到其中的几种方法：
- jQuery dotdotdot...
- Line Clampin’ (Truncating Multiple Line Text)
- CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
- A pure CSS solution for multiline text truncation
上面的 Mobify link 已删除，现在引用 archive.org 副本，但似乎在 this codepen.
中实现
遗憾的是，CSS 的当前状况不存在。
省略号呈现有先决条件 white-space:nowrap，这实际上意味着：省略号仅在单行文本容器上绘制。
经过多次尝试，我最终得到了一个混合的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: "026"; // '...'
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 代码是否在 div 上溢出，如下所示：
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>
我刚刚试了一下这个概念。基本上，如果您可以接受从最后一个字符切掉一个像素左右，这里有一个纯粹的 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 魔法来缓解角色的突然中断。
编辑：我想这强加的一件事是断字：全部中断，否则内容将不会延伸到视口的最末端。 :(
那你可以使用 CSS3 中的线钳功能。
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;
}
确保像更改自己的设置一样更改设置。
增加-webkit-line-clamp:4;增加行数:
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
<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>
Line clamp 是专有且未记录的 CSS (webkit)：https://caniuse.com/#feat=css-line-clamp，因此它目前仅适用于少数浏览器。
删除了重复的 'display' 属性 + 删除了不必要的 'text-overflow: ellipsis'.
我终于找到了一个解决方案来做我想做的事。
作为 p 段落和 article 包装。
如果要根据 article 高度（也取决于 window 高度）将省略号应用于 p，则需要获取 article 的 height , p 的 line-height 然后 articleHeight/lineHeight 找到可以动态添加的 line-clamp 的数量。
唯一的问题是 line-height 应该在 css 文件中声明。
检查以下代码。如果更改 window 的高度，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>
请检查此 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>
这个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;
}
我想出了自己的解决方案：
/*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 在推动它。
您可以尝试使用简单的 Javascript 省略号库，例如 github 上的 Ellipsity，源代码非常干净而且很小，所以如果您确实需要进行任何额外的更改，应该很容易.
也许这可以帮助你们。带有工具提示悬停的多行椭圆。
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>
<!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>
在浏览了整个互联网并尝试了很多这些选项之后，确保它被正确覆盖并支持的唯一方法是通过 javascript，我创建了一个循环函数来遍历post 项需要多行截断。
*注意我使用了 Jquery，并要求您的 post__items class 有一个固定的 max-height。
// 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;
}
或者我们可以使用高度和溢出来限制行。
如果您也有多个元素，并且想要一个 link 在省略号后带有阅读更多按钮，请查看
如果你想要这样的东西：
Every month first 10 TB are are not charged. All other traffic... Read more
我的多行省略号解决方案：
.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;
}
}
优点：
+ 跨浏览器（IE11、Edge、Chrome、Firefox、Safari 等）
+ 看起来最自然
缺点：
- 向 DOM
添加了许多额外的元素
我对我看到的任何解决方法都不满意。他们中的大多数使用目前仅在 webkit 中支持的 line-clamp。所以我一直在玩弄它，直到我想出了一个解决方案。这个纯 javascript 解决方案应该与 IE10 和更高版本以及所有现代浏览器兼容。这在下面的 Whosebug 示例 space 之外未经测试。
我认为这是一个很好的解决方案。一个重要的警告是它会为容器内的每个单词创建一个跨度，这会影响布局性能，因此您的里程可能会有所不同。
//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;
}
<div class="multi-line-container ellipses-container">
<div class="text-body ellipses-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus ut massa eget porttitor. Nulla a eros sit amet ex scelerisque iaculis nec vitae turpis. Sed pharetra tincidunt ante, in mollis turpis consectetur at. Praesent venenatis pulvinar lectus, at tincidunt nunc finibus non. Duis tortor lectus, elementum faucibus bibendum vitae, egestas bibendum ex. Maecenas vitae augue vitae dui condimentum imperdiet sit amet mattis quam. Duis eleifend scelerisque magna sed imperdiet. Mauris tempus rutrum metus, a ullamcorper erat fringilla a. Suspendisse potenti. Praesent et mi enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
我在他们的主页上看了一下 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
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>
请检查下面的代码以了解支持所有浏览器的正确对齐的纯 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>
如果您使用的是 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);
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>
是否有解决方案可以在具有流体高度 (20%) 的 div 中的最后一行添加省略号？
我在 CSS 中找到了 -webkit-line-clamp 函数，但在我的例子中，行号将取决于 window 大小。
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 - 必须有
overflow且值不是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 没有 属性 用于多行文本的省略号，因此已创建各种解决方法。可以在此处找到其中的几种方法：
- jQuery dotdotdot...
- Line Clampin’ (Truncating Multiple Line Text)
- CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
- A pure CSS solution for multiline text truncation
上面的 Mobify link 已删除，现在引用 archive.org 副本，但似乎在 this codepen.
中实现遗憾的是，CSS 的当前状况不存在。
省略号呈现有先决条件 white-space:nowrap，这实际上意味着：省略号仅在单行文本容器上绘制。
经过多次尝试，我最终得到了一个混合的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: "026"; // '...'
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 代码是否在 div 上溢出，如下所示：
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>
我刚刚试了一下这个概念。基本上，如果您可以接受从最后一个字符切掉一个像素左右，这里有一个纯粹的 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 魔法来缓解角色的突然中断。
编辑：我想这强加的一件事是断字：全部中断，否则内容将不会延伸到视口的最末端。 :(
那你可以使用 CSS3 中的线钳功能。
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;
}
确保像更改自己的设置一样更改设置。
增加-webkit-line-clamp:4;增加行数:
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
<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>
Line clamp 是专有且未记录的 CSS (webkit)：https://caniuse.com/#feat=css-line-clamp，因此它目前仅适用于少数浏览器。
删除了重复的 'display' 属性 + 删除了不必要的 'text-overflow: ellipsis'.
我终于找到了一个解决方案来做我想做的事。
作为 p 段落和 article 包装。
如果要根据 article 高度（也取决于 window 高度）将省略号应用于 p，则需要获取 article 的 height , p 的 line-height 然后 articleHeight/lineHeight 找到可以动态添加的 line-clamp 的数量。
唯一的问题是 line-height 应该在 css 文件中声明。
检查以下代码。如果更改 window 的高度，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>
请检查此 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>
这个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;
}
我想出了自己的解决方案：
/*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 在推动它。
您可以尝试使用简单的 Javascript 省略号库，例如 github 上的 Ellipsity，源代码非常干净而且很小，所以如果您确实需要进行任何额外的更改，应该很容易.
也许这可以帮助你们。带有工具提示悬停的多行椭圆。 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>
<!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>
在浏览了整个互联网并尝试了很多这些选项之后，确保它被正确覆盖并支持的唯一方法是通过 javascript，我创建了一个循环函数来遍历post 项需要多行截断。
*注意我使用了 Jquery，并要求您的 post__items class 有一个固定的 max-height。
// 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;
}
或者我们可以使用高度和溢出来限制行。
如果您也有多个元素，并且想要一个 link 在省略号后带有阅读更多按钮，请查看
如果你想要这样的东西：
Every month first 10 TB are are not charged. All other traffic... Read more
我的多行省略号解决方案：
.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;
}
}
优点：
+ 跨浏览器（IE11、Edge、Chrome、Firefox、Safari 等）
+ 看起来最自然
缺点：
- 向 DOM
我对我看到的任何解决方法都不满意。他们中的大多数使用目前仅在 webkit 中支持的 line-clamp。所以我一直在玩弄它，直到我想出了一个解决方案。这个纯 javascript 解决方案应该与 IE10 和更高版本以及所有现代浏览器兼容。这在下面的 Whosebug 示例 space 之外未经测试。
我认为这是一个很好的解决方案。一个重要的警告是它会为容器内的每个单词创建一个跨度，这会影响布局性能，因此您的里程可能会有所不同。
//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;
}
<div class="multi-line-container ellipses-container">
<div class="text-body ellipses-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus ut massa eget porttitor. Nulla a eros sit amet ex scelerisque iaculis nec vitae turpis. Sed pharetra tincidunt ante, in mollis turpis consectetur at. Praesent venenatis pulvinar lectus, at tincidunt nunc finibus non. Duis tortor lectus, elementum faucibus bibendum vitae, egestas bibendum ex. Maecenas vitae augue vitae dui condimentum imperdiet sit amet mattis quam. Duis eleifend scelerisque magna sed imperdiet. Mauris tempus rutrum metus, a ullamcorper erat fringilla a. Suspendisse potenti. Praesent et mi enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
我在他们的主页上看了一下 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
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>
请检查下面的代码以了解支持所有浏览器的正确对齐的纯 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>
如果您使用的是 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);
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>