HTML根据div高度截断内容

Question

我有一个宽度为130像素,高度为 200像素的div .

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

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

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

任何想法都非常感谢.

Answer 1

我使用dotdotdot jQuery插件来解决类似的问题.换行符不应该是dotdotdot的问题,但插入的图像应该具有html中指定的宽度和高度属性.

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

Answer 2

尝试这个：

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

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