使用CSS文本溢出来改变设置高度的元素内的文本行数 [英] Using CSS text-overflow to vary the number of lines of text within an element of a set height
问题描述
我现在深入到一些iPhone（Safari / WebKit）网络应用程序开发，想要一个设置高度的项目，标题文本和正文文本，总是显示3行。如果标题文本较短，则应显示2行正文文本。如果标题文本非常长，它应该最多占用2行，并为正文文本留下1行。每当文本被截断时，它应该显示一个省略号作为最后一个字符。
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.
我想出了以下内容，完成我需要的一切，除了它不显示省略号。有没有办法让这个解决方案满足最后的要求？
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?
下面的代码，由Safari http://segdeha.com/assets/imgs/stack-ellipsis.png 提供
<!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>
推荐答案
而不是添加省略号。
由于行高固定为16像素，因此您可以使用带有渐变的简单png图像（或使用css3渐变），从透明到相关的背景颜色，并将其定位在段落的右下角。
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，以便它只会显示，如果标题达到两行（由于溢出隐藏）。
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).
这篇关于使用CSS文本溢出来改变设置高度的元素内的文本行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
