HTML 根据 div 高度截断内容

Question

我有一个宽度为 130 像素的 div，高度为 200 像素。

在这个 div 中显示各种文本内容（我编写了一些 JS 来淡入和淡出不同的内容）。问题是即使我尝试将文本截断为 180 个字符，有时加载到此 div 中的内容可能包含图片（或可能不包含）或可能包含一些换行符（或可能不包含），因此固定字符数截断有时不会剪切足够多的文本（即换行符或图像可能会占用 div 中的更多垂直空间）。

理想情况下，当内容即将超过 200 像素的高度限制时，我想截断并添加省略号 - 这可能吗？我查看了 CSS text-overflow 属性...这似乎只适用于基于宽度的截断（或者这是一个不正确的假设？）

也许有一个基于 JS 的解决方案，或者可能计算有多少字符和图像（图像大小是固定的），然后换行将占用并截断。

非常感谢任何想法。

Answer 1

我使用dotdotdot jQuery plugin 解决了类似的问题。 dotdotdot 应该不存在换行问题，但插入的图像应该具有在 html 中指定的宽度和高度属性。

如果您正在动态生成内容，您可以在服务器端确定图像尺寸（例如，如果您使用 PHP，则使用 getimagesize 函数）。如果这不是一个选项，您可以在 $(window).load() 中初始化 dotdotdot ，但这可能会显示没有省略号的内容，直到页面上的所有媒体都加载完毕。

Answer 2

这里有一个解决方案：

http://jsfiddle.net/2jCHg/2/

文本容器的末尾有一个悬空的省略号容器。如果文本适合容器，则使用 JavaScript 隐藏省略号。省略号的<span> 必须有背景以遮挡原始文本。我在我的例子中使用了纯白色。您可以选择使用具有 alpha 透明度的 PNG 来以漂亮的渐变（透明到白色）遮挡文本。

您可以选择在脚本中注入省略号标记，以保持原始标记的原始状态。

不幸的是，省略号是右对齐的，而不是紧跟在显示的最后一个字符之后。

标记：

<div class="container">
    <div class="summary">
        Your text goes here
    </div>
    <div class="ellipsis"><span>&hellip;</span></div>
</div>

风格：

.container {
    width: 200px;
    border: 1px solid #888;
    padding: 0.5em;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.summary {
    height: 6em; /* adjust based on line-height * rows desired */
    overflow: hidden;
}
.ellipsis {
    height: 0;
    position: relative;
    top: -1.2em;
    text-align: right;
}
.ellipsis span {
    background: white; /* occlude text with background color */
    padding-left: 0.5em;
    position: relative;
    top: -0.25em;
}

脚本：

$(".summary").each(function () {
    $(this).next().toggle(this.scrollHeight > this.offsetHeight);
});

Answer 3

试试这个：

.ellipsis{ 
  white-space: word;
  overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Answer 4

试试这个：

.ellipsis{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}