在CSS中，使用“…”表示溢出的多行块
同
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 如果溢出，则会在行尾显示“…”。 但是，这只会显示在一行中。 但是我希望能够多线显示。
它可能看起来像：
+--------------------+ |abcde feg hij dkjd| |dsji jdia js ajid s| |jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */ +--------------------+
也有几个jquery插件来处理这个问题，但是很多不处理多行文本。 以下作品：
- http://pvdspek.github.com/jquery.autoellipsis/
- http://dotdotdot.frebsite.nl/
- http://keith-wood.name/more.html
- http://github.com/tbasse/jquery-truncate
还有一些性能testing 。
我已经破解了，直到我设法实现了这个目标。 它带有一些注意事项：
- 这不是纯粹的CSS; 你必须添加一些HTML元素。 然而，没有JavaScript的要求。
- 省略号在最后一行右alignment。 这意味着，如果您的文本不是右alignment或alignment的，最后一个可见词和省略号之间可能会有一个明显的差距（取决于第一个隐藏词的长度）。
- 总是保留省略号的空间。 这意味着，如果文本几乎正好在框中，它可能会被不必要地截断（最后一个字是隐藏的，尽pipe它在技术上不必）。
- 你的文本需要有一个固定的背景颜色，因为我们正在使用彩色矩形来隐藏省略号的情况下，它不需要。
我也应该注意到，这个文本将在一个文字边界而不是一个字符边界被打破。 这是故意的（因为我认为对于更长的文本来说更好），但是因为它和text-overflow: ellipsis这样做，所以我想我应该提到它。
如果你能忍受这些警告，HTML看起来像这样：
<div class="ellipsify"> <div class="pre-dots"></div> <div class="dots">…</div> <!-- your text here --> <span class="hidedots1"></span> <div class="hidedots2"></div> </div>
这是相应的CSS，使用一个150像素宽的框的例子，在白色背景上有三行文本。 它假定你有一个CSS重置或类似的设置边距和填充零位在必要的地方。
/* the wrapper */ .ellipsify { font-size:12px; line-height:18px; height: 54px; /* 3x line height */ width: 150px; overflow: hidden; position: relative; /* so we're a positioning parent for the dot hiders */ background: white; } /* Used to push down .dots. Can't use absolute positioning, since that would stop the floating. Can't use relative positioning, since that would cause floating in the wrong (namely: original) place. Can't change height of #dots, since it would have the full width, and thus cause early wrapping on all lines. */ .pre-dots { float: right; height: 36px; /* 2x line height (one less than visible lines) */ } .dots { float: right; /* to make the text wrap around the dots */ clear: right; /* to push us below (not next to) .pre-dots */ } /* hides the dots if the text has *exactly* 3 lines */ .hidedots1 { background: white; width: 150px; height: 18px; /* line height */ position: absolute; /* otherwise, because of the width, it'll be wrapped */ } /* hides the dots if the text has *less than* 3 lines */ .hidedots2 { background: white; width: 150px; height: 54px; /* 3x line height, to ensure hiding even if empty */ position: absolute; /* ensures we're above the dots */ }
结果如下所示：
为了弄清楚它是如何工作的，这里有相同的图像，除了.hidedots1是红色.hidedots2 ，而.hidedots2是青色的。 当没有不可见的文本时，这些是隐藏省略号的矩形：
testingIE9，IE8（模拟），Chrome，Firefox，Safari和Opera。 在IE7中不起作用。
这是一个最近讨论这个问题的CSS技巧文章 。
上述文章中的一些解决scheme（这里没有提到）是
1） -webkit-line-clamp和2）将一个绝对定位的元素放在右下方并淡出
两种方法都假定有以下标记：
<div class="module"> /* Add line-clamp/fade class here*/ <p>Text here</p> </div>
与CSS
.module { width: 250px; overflow: hidden; }
1）-webkit线夹
线夹FIDDLE （最多3行）
.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 3.6em; /* I needed this to get it to work */ }
2）淡出
假设您将行高设置为1.2em。 如果我们要显示三行文字，我们可以将容器的高度设置为3.6em（1.2em×3）。 隐藏的溢出将隐藏其余的部分。
淡出FIDDLE
p { margin:0;padding:0; } .module { width: 250px; overflow: hidden; border: 1px solid green; margin: 10px; } .fade { position: relative; height: 3.6em; /* exactly three lines */ } .fade:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; height: 1.2em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); }
解决scheme＃3 – 使用@supports的组合
我们可以使用@supports在webkit浏览器上应用webkit的线夹，并在其他浏览器中应用淡入淡出。
@支持与淡出回退小提琴线夹
<div class="module line-clamp"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>
CSS
.module { width: 250px; overflow: hidden; border: 1px solid green; margin: 10px; } .line-clamp { position: relative; height: 3.6em; /* exactly three lines */ } .line-clamp:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; height: 1.2em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } @supports (-webkit-line-clamp: 3) { .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height:3.6em; /* I needed this to get it to work */ height: auto; } .line-clamp:after { display: none; } }
下面的链接为这个问题提供了一个纯粹的HTML / CSS解决scheme。
浏览器支持 – 如文章中所述：
到目前为止，我们已经testing了Safari 5.0，IE 9（必须在标准模式下），Opera 12和Firefox 15。
旧版本的浏览器仍然能够正常工作，因为布局的肉质是正常的定位，边距和填充属性。 如果您的平台比较旧（例如Firefox 3.6，IE 8），则可以使用该方法，但将梯度作为独立的PNG图像或DirectXfilter进行重做。
http://www.mobify.com/dev/multiline-ellipsis-in-pure-css
CSS：
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: -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); }
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>
小提琴
（调整浏览器的窗口进行testing）
在查看W3规范的文本溢出后 ，我不认为这是可能的只使用CSS。 省略号是一个新的属性，所以它可能还没有得到太多的使用或反馈。
然而， 这个人似乎问了一个类似（或相同）的问题，有人能够想出一个不错的jQuery解决scheme。 你可以在这里演示解决scheme： http : //jsfiddle.net/MPkSF/
如果JavaScript不是一个选项，我想你可能会运气不好
只是为了完整而添加到这个问题。
- Opera对这个称为-o-ellipsis-lastline的非标准支持。
- dotdotdot是我可以推荐的一个很棒的jQuery插件。
很好的问题…我希望有一个答案，但这是最近你可以用CSS获得这些天。 没有省略号，但仍然很可用。
overflow: hidden; line-height: 1.2em; height: 3.6em; // 3 lines * line-height
我发现这个CSS（scss）解决scheme工作得很好。 在webkit浏览器上显示省略号，在其他浏览器上只截断文本。 这对我的预期用途很好。
$font-size: 26px; $line-height: 1.4; $lines-to-show: 3; h2 { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 400px; height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ margin: 0 auto; font-size: $font-size; line-height: $line-height; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
创build者的一个例子是： http : //codepen.io/martinwolf/pen/qlFdp
这是最接近的解决scheme，我可以得到使用只是CSS。
HTML
<div class="ellipsis"> <span>...</span> Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>
CSS
div { height: 3em; line-height: 1.5em; width: 80%; border: 1px solid green; overflow: hidden; position: relative; } div:after { content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; background-color: white; color: white; display: inline; position: relative; box-shadow: 8px 1px 1px white; z-index: 1; } span { position: absolute; bottom: 0px; right: 0px; background-color: white; }
工作小提琴 （ 调整窗口检查 ）
链接到我的博客的解释
更新小提琴
我希望现在一些CSS专家能够想出如何使其完美。 🙂
在你的情况下，以下应该是有效和足够的。
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
这次派对晚了，但我想出了，我认为是一个独特的解决scheme。 而不是尝试通过CSS技巧或JS插入自己的省略号，我想我会尝试和单线限制滚动。 所以我重复每一行的文本，只是使用一个负面的文本缩进，以确保一行开始最后一个停止的地方。 小提琴
CSS：
#wrapper{ font-size: 20pt; line-height: 22pt; width: 100%; overflow: hidden; padding: 0; margin: 0; } .text-block-line{ height: 22pt; display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; width: auto; } .text-block-line:last-child{ text-overflow: ellipsis; } /*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */ .line2{ text-indent: -100%; } .line3{ text-indent: -200%; } .line4{ text-indent: -300%; }
HTML：
<p id="wrapper" class="redraw"> <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span> <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span> <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span> <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span> </p>
在小提琴的更多细节。 浏览器回stream有一个问题，我使用JS重绘，所以这样做检查出来，但这是基本的概念。 任何想法/build议非常感谢。
感谢@balpha和@Kevin，我将两种方法结合在一起。
这个方法中不需要js。
你可以使用background-image ，不需要渐变来隐藏点。
.ellipsis-placeholder的innerHTML不是必须的，我使用.ellipsis-placeholder保持与.ellipsis-more相同的宽度和高度。 你可以使用display: inline-block代替。
.ellipsis { overflow: hidden; position: relative; } .ellipsis-more-top {/*push down .ellipsis-more*/ content: ""; float: left; width: 5px; } .ellipsis-text-container { float: right; width: 100%; margin-left: -5px; } .ellipsis-more-container { float: right; position: relative; left: 100%; width: 5px; margin-left: -5px; border-right: solid 5px transparent; white-space: nowrap; } .ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/ float: right; clear: right; color: transparent; } .ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/ float: right; width: 0; } .ellipsis-more {/*ellipsis things here*/ float: right; } .ellipsis-height {/*the total height*/ height: 3.6em; } .ellipsis-line-height {/*the line-height*/ line-height: 1.2; } .ellipsis-margin-top {/*one line height*/ margin-top: -1.2em; } .ellipsis-text { word-break: break-all; }
<div class="ellipsis ellipsis-height ellipsis-line-height"> <div class="ellipsis-more-top ellipsis-height"></div> <div class="ellipsis-text-container"> <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div> <div class="ellipsis-placeholder"> <span>...</span><span>more</span> </div> <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span> </div> <div class="ellipsis-more-container ellipsis-margin-top"> <div class="ellipsis-more"> <span>...</span><span>more</span> </div> </div> </div>
这里有很多答案，但我需要一个：
- 仅限CSS
- 面向未来（与时间更加兼容）
- 不要打破单词（只在空格上打破）
需要注意的是，它没有为不支持-webkit-line-clamp规则的浏览器（当前是IE，Edge，Firefox）提供省略号，但是它使用渐变来淡化文本。
.clampMe { position: relative; height: 2.4em; overflow: hidden; } .clampMe:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 50%; height: 1.2em; /* Just use multiples of the line-height */ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%); } /* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */ @supports (-webkit-line-clamp: 2) { .clampMe { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .clampMe:after { display: none; } }
<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
JavaScript的解决scheme会更好
- 获取文本的行数
- 如果窗口resize或改变，切换
is-ellipsis类
getRowRects
Element.getClientRects()像这样工作
同一行中的每个rects具有相同的top值，所以找出不同top值的rects，就像这样
function getRowRects(element) { var rects = [], clientRects = element.getClientRects(), len = clientRects.length, clientRect, top, rectsLen, rect, i; for(i=0; i<len; i++) { has = false; rectsLen = rects.length; clientRect = clientRects[i]; top = clientRect.top; while(rectsLen--) { rect = rects[rectsLen]; if (rect.top == top) { has = true; break; } } if(has) { rect.right = rect.right > clientRect.right ? rect.right : clientRect.right; rect.width = rect.right - rect.left; } else { rects.push({ top: clientRect.top, right: clientRect.right, bottom: clientRect.bottom, left: clientRect.left, width: clientRect.width, height: clientRect.height }); } } return rects; }
浮动...more
像这样
检测窗口大小或元素已更改
像这样
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
查看更多点击这里
基于-webkit-line-clamp的纯css方法：
@-webkit-keyframes ellipsis {/*for test*/ 0% { width: 622px } 50% { width: 311px } 100% { width: 622px } } .ellipsis { max-height: 40px;/* h*n */ overflow: hidden; background: #eee; -webkit-animation: ellipsis ease 5s infinite;/*for test*/ /** overflow: visible; /**/ } .ellipsis .content { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; font-size: 50px;/* w */ line-height: 20px;/* line-height h */ color: transparent; -webkit-line-clamp: 2;/* max row number n */ vertical-align: top; } .ellipsis .text { display: inline; vertical-align: top; font-size: 14px; color: #000; } .ellipsis .overlay { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; overflow: hidden; /** overflow: visible; left: 0; background: rgba(0,0,0,.5); /**/ } .ellipsis .overlay:before { content: ""; display: block; float: left; width: 50%; height: 100%; /** background: lightgreen; /**/ } .ellipsis .placeholder { float: left; width: 50%; height: 40px;/* h*n */ /** background: lightblue; /**/ } .ellipsis .more { position: relative; top: -20px;/* -h */ left: -50px;/* -w */ float: left; color: #000; width: 50px;/* width of the .more w */ height: 20px;/* h */ font-size: 14px; /** top: 0; left: 0; background: orange; /**/ }
<div class='ellipsis'> <div class='content'> <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div> <div class='overlay'> <div class='placeholder'></div> <div class='more'>...more</div> </div> </div> </div>
我发现了一个JavaScript技巧，但你必须使用string的长度。 假设你想要3行宽度为250px，你可以计算每行的长度，即
//get the total character length. //Haha this might vary if you have a text with lots of "i" vs "w" var totalLength = (width / yourFontSize) * yourNumberOfLines //then ellipsify function shorten(text, totalLength) { var ret = text; if (ret.length > totalLength) { ret = ret.substr(0, totalLength-3) + "..."; } return ret; }
