使用 CSS text-overflow 来改变设置高度的元素内的文本行数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1067166/
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
Using CSS text-overflow to vary the number of lines of text within an element of a set height
提问by Andrew Hedges
I'm deep into some iPhone (Safari/WebKit) web app development at the moment and want to have items of a set height with title text and body text such that 3 lines are always showing. If the title text is short, 2 lines of body text should show. If the title text is very long, it should take up a maximum of 2 lines and leave 1 line for body text. Whenever text is truncated, it should display an ellipsis as the last character.
我目前正在深入研究一些 iPhone (Safari/WebKit) 网络应用程序开发，并希望拥有具有标题文本和正文文本的设置高度的项目，以便始终显示 3 行。如果标题文本很短，则应显示 2 行正文。如果标题文本很长，它应该最多占用 2 行，留下 1 行作为正文。每当文本被截断时，它应该显示一个省略号作为最后一个字符。
I've come up with the following that does everything I need, except that it does not display the ellipsis. Is there a way to get this solution to satisfy that last requirement?
我想出了以下可以完成我需要的一切，只是它不显示省略号。有没有办法让这个解决方案满足最后一个要求？
(source: segdeha.com)
（来源：segdeha.com）
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container {
width: 100px;
}
p {
/* white-space: nowrap; */
font-family: Helvetica;
font-size: 12px;
line-height: 16px;
text-overflow: ellipsis;
max-height: 48px;
overflow: hidden;
border: solid 1px red;
}
strong {
/* white-space: nowrap; */
font-size: 16px;
display: block;
text-overflow: ellipsis;
max-height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>
<strong>Short title</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
<p>
<strong>Long title that will span more
than 2 lines when we're done.</strong>
This is the text description of the item.
It can flow onto more than 2 lines, too,
if there is room for it, but otherwise
should only show 1 line.
</p>
</div>
</body>
</html>
回答by Magnus Magnusson
One solution to this problem is to fade the text out rather than to add an ellipsis. If this is an acceptable alternative for you then please read on.
此问题的一种解决方案是淡出文本而不是添加省略号。如果这是您可以接受的替代方案，请继续阅读。
Since the line height is fixed at 16px you can use a simple png image with a gradient (or use a css3 gradient) that goes from transparent to the relevant background color and position it in the lower right corner of the paragraph.
由于行高固定为 16px，您可以使用带有渐变的简单 png 图像（或使用 css3 渐变），从透明到相关背景颜色并将其放置在段落的右下角。
The same will work for the headline if you position the gradient image 16px from the top so that it will only be visible if the heading reaches two lines (thanks to overflow hidden).
如果您将渐变图像放置在距顶部 16 像素的位置，那么同样适用于标题，这样它只有在标题达到两行时才可见（感谢溢出隐藏）。
回答by Eugene
You can specify the font size to be used within this field (font-size), then fix the heightand widthof the field (because now you know how many lines of font-sizesize can fit), and then use the overflowproperty (not text-overflow)
您可以指定要在此字段中使用的字体大小 ( font-size)，然后修复该字段的height和width（因为现在您知道font-size可以容纳多少行大小），然后使用overflow属性 (not text-overflow)
回答by u?nb??s
Try this one: jsfiddle.net/7BXtr/. It only uses CSS (no JavaScript).
试试这个：jsfiddle.net/7BXtr/。它只使用 CSS（没有 JavaScript）。
Basically, the text has overflow: hiddenapplied, and ...is positioned after it.
基本上，文本已overflow: hidden应用，并...位于其后。
Downsides:
缺点：
- An ellipsis will always appear after the description, even if it is short.
- The ellipses always appear at the same positions on the right.
- 说明之后总会出现省略号，即使它很短。
- 椭圆总是出现在右侧的相同位置。
回答by UKM
I know this is too late of a response. But for others looking for the same problem: I am developing on top of Magnus Magnusson answer.
我知道这已经太迟了。但是对于其他寻找相同问题的人：我正在根据 Magnus Magnusson 的回答进行开发。
To create a translucent shade, you can use the box-shadow property which can be used to create an inner shade effect.
要创建半透明阴影，您可以使用 box-shadow 属性，该属性可用于创建内部阴影效果。
