Html 是否可以在多行文本上使用 text-overflow:ellipsis？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6572330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to use text-overflow:ellipsis on multiline text?
提问by Johan
I have a <p>tag with a specific widthand height.
我有一个<p>具有特定宽度和高度的标签。
I want to use text-overflow:ellipsisto get ...if the text in the tag is too long.
如果标签中的文本太长，我想用它text-overflow:ellipsis来获取...。
Is this possible to solve with css on multiline text?
这可以在多行文本上用 css 解决吗？
回答by thirtydot
Googling doesn't reveal anything even remotely promising, so I'm going to say that it's not possible.
谷歌搜索没有透露任何有希望的东西，所以我要说这是不可能的。
I did find text-overflow: -o-ellipsis-lastline, but it only works in Opera: http://people.opera.com/dstorey/text/text-overflow.html(mirror: http://jsbin.com/exugux/)
我确实找到了text-overflow: -o-ellipsis-lastline，但它只适用于 Opera：http: //people.opera.com/dstorey/text/text-overflow.html（镜像：http: //jsbin.com/exugux/）
There's also a similar WebKit-only solution: http://dropshado.ws/post/1015351370/webkit-line-clamp
还有一个类似的 WebKit-only 解决方案：http: //dropshado.ws/post/1015351370/webkit-line-clamp
回答by Harish Anchu
You can do it with css. It only works in webkit browsers but has a fallback for the other ones.
你可以用css来做。它只适用于 webkit 浏览器，但对其他浏览器有后备作用。
use :
用 ：
display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
along with:
随着：
max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;
Here is the fiddle: demo
这是小提琴：演示
回答by Barney
I'm posting this because I believe my solution is less complex than the popular one, which involves pseudo elements and float behaviour. I recently had to create a solution which would work in IE7, so pseudo elements weren't an option in the first place.
我发布这个是因为我相信我的解决方案没有流行的解决方案复杂，后者涉及伪元素和浮动行为。我最近不得不创建一个可以在 IE7 中工作的解决方案，所以伪元素首先不是一个选项。
The technique involves 4 elements:
该技术涉及4个要素：
- A block level container which determines the maximum height of the contents
- An inline wrapper for the text content
- An ellipsis contained within the inline wrapper
- A 'fill' element, also inside the inline wrapper, that occludes the ellipsis when the text content doesn't exceed the dimensions of the container
- 确定内容最大高度的块级容器
- 文本内容的内联包装器
- 内联包装器中包含的省略号
- 'fill' 元素，也在内联包装器内，当文本内容不超过容器的尺寸时，它会遮挡省略号
As with previous CSS-only solutions, the technique demands a solid colour background or fixed position background image for the contents: the ellipsis needs to obscure parts of the text, and the fill needs to obscure the ellipsis. You can do a fancy gradient effect to make the text fade into the ellipsis, but I'll leave that cosmetic detail to discretion.
与以前的纯 CSS 解决方案一样，该技术需要为内容提供纯色背景或固定位置的背景图像：省略号需要遮盖部分文本，填充需要遮盖省略号。你可以做一个花哨的渐变效果，让文本淡入省略号，但我会让这个装饰细节自行决定。
HTML structure
HTML 结构
<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
<!-- The inline wrapper -->
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
<!-- The ellipsis, which can contain anything you want -
(a 'more' link, for example) -->
<span class="ellipsis">
…
</span>
<!-- The fill, which covers the ellipsis when the text doesn't overflow -->
<span class="fill"></span>
</span>
</p>
CSS
CSS
body {
/* We need a solid background or background-position: fixed */
background: #fff;
/* You'll need to know the line height to clamp on line breaks */
line-height: 1.5;
}
.clamped {
overflow: hidden;
position: relative;
}
/* Clamp to 2 lines, ie line-height x 2:
Obviously any number of these classes can be written as needed
*/
.clamped-2 {
max-height: 3em;
}
/* The ellipsis is always at the bottom right of the container,
but when the text doesn't reach the bottom right...
*/
.clamped .ellipsis {
background: #fff;
bottom: 0;
position: absolute;
right: 0;
}
/* ...It's obscured by the fill, which is positioned at the bottom right
of the text, and occupies any remaining space.
*/
.clamped .fill {
background: #fff;
height: 100%;
position: absolute;
width: 100%;
}
Here's a fiddle demonstrating it: resize your browser's width or change the text to see it shift from ellipsis to no-ellipsis.
这是一个演示它的小提琴：调整浏览器的宽度或更改文本以查看它从省略号转换为无省略号。
Aside from the arbitrary elegance factor, I believe this is more performant than the popular solution because it doesn't rely on floats (which require a lot of repainting) — absolute positioning is much simpler to compute since there are no inter-dependencies when calculating layout.
除了任意的优雅因素之外，我相信这比流行的解决方案性能更高，因为它不依赖于浮点数（需要大量重新绘制）——绝对定位更容易计算，因为在计算时没有相互依赖布局。
回答by user1152475
I wrote a javascript function to fix the multiline ellipsis problem
我写了一个javascript函数来解决多行省略号问题
function ellipsizeTextBox(id) {
var el = document.getElementById(id);
var keep = el.innerHTML;
while(el.scrollHeight > el.offsetHeight) {
el.innerHTML = keep;
el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
keep = el.innerHTML;
el.innerHTML = el.innerHTML + "...";
}
}
hope this helps!
希望这可以帮助！
回答by Wladimir Gramacho
I found a solution for multi-line cross-browser pure CSS ellipsis. I tried lots of solutions and only this one worked out only using CSS. I had a div with a dynamic width and had to set the height.
我找到了多行跨浏览器纯 CSS 省略号的解决方案。我尝试了很多解决方案，只有这个解决方案只使用 CSS。我有一个动态宽度的 div，必须设置高度。
Here's the link: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
这是链接：http: //hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
回答by LocalPCGuy
Modified the function by user1152475so it works word by word (space delimited) rather than character by character.
由 user1152475修改了该函数，因此它可以逐字（空格分隔）而不是逐个字符地工作。
function ellipsizeTextBox(id) {
var el = document.getElementById(id);
var wordArray = el.innerHTML.split(' ');
while(el.scrollHeight > el.offsetHeight) {
wordArray.pop();
el.innerHTML = wordArray.join(' ') + '...';
}
}
Note, for both solutions, the box must have a set height.
请注意，对于这两种解决方案，框都必须具有设定的高度。
回答by Samuel Rossille
HTML offers no such feature, and this is very frustrating.
HTML 没有提供这样的功能，这很令人沮丧。
That's why i have developped a small library to deal with this issue. The library provides objects to modelize and perform letter-level text rendering. This should do just what you need:
这就是为什么我开发了一个小型库来处理这个问题。该库提供了用于建模和执行字母级文本渲染的对象。这应该做你需要的：
Read more at http://www.samuelrossille.com/home/jstextfor screenshot, tutorial, and dowload link.
在http://www.samuelrossille.com/home/jstext阅读更多截图、教程和下载链接。
回答by Tamo Maes
As pointed out before there is a weird way to accomplish this with a webkit-box posted by David DeSandro:
正如之前所指出的，有一种奇怪的方法可以通过 David DeSandro 发布的 webkit-box 来实现这一点：
elements_to_style {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis
-webkit-line-clamp: number_of_lines_you_want;
-webkit-box-orient: vertical;
}
回答by serraosays
回答by Baleshwar Dabbikar
.minHeightg {
height: 5.6rem !important;
width: 20%;
}
.productOverflow {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px;
/* fallback */
max-height: 3.6rem;
/* fallback */
-webkit-line-clamp: 3;
/* number of lines to show */
-webkit-box-orient: vertical;
}
/*firefox*/
@-moz-document url-prefix() {
.productOverflow {
overflow: hidden;
text-overflow: ellipsis;
display: -moz-box !important;
line-height: 16px;
/* fallback */
max-height: 3.6rem;
/* fallback */
-moz-line-clamp: 3;
/* number of lines to show */
-moz-box-orient: vertical;
}
}<div class="minHeightg">
<p class="productOverflow">Some quick example text to build on the card title .</p>
</div>