我现在深入研究了一些iPhone(Safari/WebKit)Web应用程序开发,并希望拥有标题文本和正文文本的设置高度项目,以便始终显示3行.如果标题文本很短,则应显示2行正文.如果标题文本很长,则最多应占用2行,并为正文留下1行.每当文本被截断时,它应该显示省略号作为最后一个字符.
我想出了以下内容,它可以完成我需要的一切,除了它不显示省略号.有没有办法让这个解决方案满足最后的要求？
下面的代码,由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>
这个问题的一个解决方案是淡出文本而不是添加省略号.如果这是您可以接受的替代方案,那么请继续阅读.
由于线条高度固定为16px,您可以使用带有渐变(或使用css3渐变)的简单png图像,该图像从透明到相关背景颜色,并将其放置在段落的右下角.
如果您将渐变图像从顶部放置16px,那么它将适用于标题,这样只有当标题达到两行时才会显示(由于溢出隐藏).