使用CSS文本溢出来改变设置高度的元素内的文本行数

我现在深入研究了一些iPhone(Safari/WebKit)Web应用程序开发,并希望拥有标题文本和正文文本的设置高度项目,以便始终显示3行.如果标题文本很短,则应显示2行正文.如果标题文本很长,则最多应占用2行,并为正文留下1行.每当文本被截断时,它应该显示省略号作为最后一个字符.

我想出了以下内容,它可以完成我需要的一切,除了它不显示省略号.有没有办法让这个解决方案满足最后的要求？

下面的代码,由Safari http://segdeha.com/assets/imgs/stack-ellipsis.png呈现

    
        
    
    
        

            

                Short title
                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.
            
            

                Long title that will span more 
                than 2 lines when we're done.
                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.
            
        
    

Magnus Magnu.. 9

这个问题的一个解决方案是淡出文本而不是添加省略号.如果这是您可以接受的替代方案,那么请继续阅读.

由于线条高度固定为16px,您可以使用带有渐变(或使用css3渐变)的简单png图像,该图像从透明到相关背景颜色,并将其放置在段落的右下角.

如果您将渐变图像从顶部放置16px,那么它将适用于标题,这样只有当标题达到两行时才会显示(由于溢出隐藏).

这个问题的一个解决方案是淡出文本而不是添加省略号.如果这是您可以接受的替代方案,那么请继续阅读.

由于线条高度固定为16px,您可以使用带有渐变(或使用css3渐变)的简单png图像,该图像从透明到相关背景颜色,并将其放置在段落的右下角.

如果您将渐变图像从顶部放置16px,那么它将适用于标题,这样只有当标题达到两行时才会显示(由于溢出隐藏).