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

【问题标题】：Using CSS text-overflow to vary the number of lines of text within an element of a set height使用 CSS 文本溢出来改变设置高度元素内的文本行数
【发布时间】：2019-03-26 16:59:47
【问题描述】：

我目前正在深入研究一些 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>

【问题讨论】：

我在 Safari 中查看了 iphone.facebook.com（欺骗 iPhone 用户代理），看起来他们在服务器端执行此操作。我怀疑我注定要遭受同样的命运。
过去我也想做类似的事情。我最终尝试拆分行并添加省略号服务器端。这最终要求我知道文本的宽度和高度（以像素为单位）。最终我沮丧地放弃了。
JavaScript 是不可能的吗？
太糟糕了媒体查询不支持这个。如果你能做这样的事情会很棒... @media id="myIdHere" and (max-height:32px) {strong{content:'...';}}
您需要指定white-space:nowrap 才能使text-overflow 正常工作。这意味着您被限制在一行文本中。所以看起来你想要的东西不能单独使用 CSS 来实现。 :(（来源：quirksmode.org/css/textoverflow.html）

标签： css

【解决方案1】：

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

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

如果您将渐变图像放置在距顶部 16 像素的位置，标题也将如此，这样只有在标题达到两行时它才会可见（感谢溢出隐藏）。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

缺点：

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

【讨论】：

问题是，省略号总是会被插入，即使文本太短。
@LEOPiC 我知道，这只是一种几乎可以实现它的 hacky 方式。

【解决方案4】：

我知道现在回复太晚了。但对于寻找同样问题的其他人：我正在根据 Magnus Magnusson 的答案进行开发。

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

【讨论】：