HTML根据div高度截断内容 [英] HTML truncate content based on div height
问题描述
我有一个宽度为130像素的div，高度为200像素。
各种文字内容显示在此div写一些JS来淡入和淡出不同的内容）。问题是即使我已经尝试截断文本说180个字符，有时加载到此div的内容可能包含图片（或可能不会）或可能包含一些换行符（或可能不），因此固定字符计数对于截断有时不足够的文本（即换行符，或者也许一个图像将占据更多的垂直空间在div）。
理想情况下，我会喜欢截断和添加省略号到内容，当它要超过200px的高度限制 - 这是可能吗？我看过CSS text-overflow 属性...这似乎只工作真正的宽度截断（或者是一个不正确的假设？）
也许有一个基于JS的解决方案，或者可能计算多少字符和图像（图像大小是固定的），换行会占用和截断之后。
$ b我使用了 dotdotdot jQuery plugin 来解决类似的问题。
如果你正在动态生成内容，你可以确定图像尺寸server- （例如，如果您使用PHP，则 getimagesize 函数）。如果这不是一个选项，你可以初始化$（window）.load（）内的dotdotdot，但这可能会显示没有省略号的内容，直到页面上的所有媒体被加载。
I have a div with width of 130px a height of 200px.
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).
Ideally I'd like to truncate and add an ellipsis to the content when it is about to go over the 200px height limit - is this possible? I've looked at the CSS text-overflow property...this seems to work only really for width based truncating (or is that an incorrect assumption?)
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.
Any ideas are much appreciated.
I used dotdotdot jQuery plugin to 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.
If you are generating content dynamically you could determine image dimensions server-side (e.g. getimagesize function 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.
这篇关于HTML根据div高度截断内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
