javascript HTML根据div高度截断内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8985684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML truncate content based on div height
提问by harman_kardon
I have a div with width of 130px a height of 200px.
我有一个宽度为 130px高度为 200px的 div 。
Various text content gets displayed in this div (I've written some JS to fade in and out different content). The problem is even though I've tried truncating the text to say 180 characters, sometimes the content loaded into this div may contain a picture (or it may not) or might contain some line breaks (or may not) so a fixed character count for truncating sometimes does not clip enough of the text (i.e. the line breaks or perhaps an image will have taken up more vertical space in the div).
在这个 div 中显示了各种文本内容（我已经编写了一些 JS 来淡入和淡出不同的内容）。问题是即使我尝试将文本截断为 180 个字符，有时加载到此 div 的内容可能包含图片（或可能不包含）或可能包含一些换行符（或可能不包含），因此固定字符数截断有时不会剪辑足够的文本（即换行符或图像可能会在 div 中占据更多的垂直空间）。
Ideally I'd like to truncate and add an ellipsisto the content when it is about to go over the 200px height limit - is this possible? I've looked at the CSS text-overflowproperty...this seems to work only really for width based truncating (or is that an incorrect assumption?)
理想情况下，当内容即将超过 200 像素高度限制时，我想截断内容并向其添加省略号- 这可能吗？我看过 CSStext-overflow属性……这似乎只适用于基于宽度的截断（或者这是一个不正确的假设？）
Perhaps there is a JS based solution or maybe calcuating how many characters and image (the image sizes ARE fixed) and line break will take up and truncating after that.
也许有一个基于 JS 的解决方案，或者可能计算多少个字符和图像（图像大小是固定的）和换行符将在此之后占用并截断。
Any ideas are much appreciated.
任何想法都非常感谢。
回答by netopolit
I used dotdotdot jQuery pluginto solve a similar problem. Line breaks should not be an issue with dotdotdot but inserted images should have width and height atributes specified in html.
我使用dotdotdot jQuery 插件来解决类似的问题。换行符不应该是 dotdotdot 的问题，但插入的图像应该具有在 html 中指定的宽度和高度属性。
If you are generating content dynamically you could determine image dimensions server-side (e.g. getimagesizefunction if you are using PHP). If this is not an option you can initialize dotdotdot inside $(window).load() but this will probably show content without ellipsis till all the media on the page is loaded.
如果您动态生成内容，您可以确定服务器端的图像尺寸（例如，如果您使用 PHP，则使用getimagesize函数）。如果这不是一个选项，您可以在 $(window).load() 中初始化 dotdotdot 但这可能会显示没有省略号的内容，直到页面上的所有媒体都加载完毕。
回答by Ates Goral
Here's a solution:
这是一个解决方案：
There's a dangling ellipsis container at the end of the text container. The ellipsis is hidden using JavaScript if the text fits the container. The <span>for the ellipsis has to have a background to occlude the original text. I used flat white in my example. You can optionally use a PNG with alpha transparency to occlude the text with a nice gradient (transparent to white).
文本容器的末尾有一个悬空的省略号容器。如果文本适合容器，则使用 JavaScript 隐藏省略号。在<span>为省略号必须有一个背景闭塞原文。我在我的例子中使用了纯白色。您可以选择使用具有 alpha 透明度的 PNG 来遮挡具有漂亮渐变（透明到白色）的文本。
You can optionally inject the ellipsis markup with your script to keep your original markup pristine.
您可以选择在脚本中注入省略号标记，以保持原始标记的原始状态。
It's also unfortunate that the ellipsis is right-justified instead of immediately following the last character that's displayed.
同样不幸的是，省略号是右对齐的，而不是紧跟在显示的最后一个字符之后。
Markup:
标记：
<div class="container">
<div class="summary">
Your text goes here
</div>
<div class="ellipsis"><span>…</span></div>
</div>
Style:
风格：
.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;
}
Script:
脚本：
$(".summary").each(function () {
$(this).next().toggle(this.scrollHeight > this.offsetHeight);
});
回答by Jannis M
Try this:
试试这个：
.ellipsis{
white-space: word;
overflow:hidden;
}
.ellipsis:after{
content:'...';
}
回答by Abhidev
Try this:
试试这个：
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
