Question

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

我想出了以下内容，它可以完成我需要的所有内容，但不会显示省略号。有没有办法让这个解决方案满足最后的要求？

_{（来源：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>

Answer 1

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

由于线条高度固定为16px，您可以使用带有渐变（或使用css3渐变）的简单png图像，该图形从透明到相关背景颜色，并将其放置在段落的右下角。< / p>

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

Answer 2

您可以指定要在此字段中使用的字体大小（font-size），然后修复该字段的height和width（因为现在您知道了多少行{ {1}}大小可以适合），然后使用font-size属性（不是overflow）

Answer 3

试试这个：jsfiddle.net/7BXtr/。它只使用CSS（没有JavaScript）。

基本上，文字已应用overflow: hidden，...位于其后面。

缺点：

省略号将始终出现在说明之后，即使它很短。
省略号总是出现在右侧的相同位置。

Answer 4

我知道这已经太迟了。但对于寻找同样问题的其他人：我正在开发Magnus Magnusson的答案。

要创建半透明阴影，可以使用box-shadow属性，该属性可用于创建内部阴影效果。

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

4 个答案: