Question

我的div宽度为130px，高度为200px 。

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

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

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

非常感谢任何想法。

Answer 1

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

如果您正在动态生成内容，则可以确定服务器端的图像维度（例如getimagesize函数，如果您使用的是PHP）。如果这不是一个选项，你可以在$（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;
}

HTML根据div高度截断内容

4 个答案: