使用JavaScript完美计算所有因数的算法过于复杂。
使用CSS3有line-clamp功能。
但是这仅适用于现代浏览器。
p{
margin:20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
演示
http://jsfiddle.net/MM29r/
这让您可以设置在添加3个点之前要显示的行数。
现在您想要300像素... 所以:
var p=document.getElementsByTagName('p')[0],
lineheight=parseInt(window.getComputedStyle(p).getPropertyValue("line-height"));
var lines=Math.floor(300/lineheight);
p.style['-webkit-line-clamp']=lines;
所以这将给你一个不超过300像素的元素。
演示
http://jsfiddle.net/MM29r/1/
http://jsfiddle.net/MM29r/2/
需要的值:
line-height
现在,如果您想使框的高度恰好为300px,请添加段落的边距或填充。但这取决于您的喜好。
如果您有任何问题,请询问。
注意
每个js函数都会通过计算单词末尾添加3个点,这对于应用于真实世界的网站来说是资源密集型的。
更好的方法是一次计算每个段落,并将夹紧的结果添加到db中或将其存储在静态网站中。
但是,每个浏览器以不同的方式显示字体。
编辑
以下是显示部分内容的
不同方法。使用max-height和
-webkit-column-count
https://stackoverflow.com/a/20691677/2450730
演示
http://jsfiddle.net/HNF3d/10/
支持程度略高于
line-clamp
,并且能够显示全部内容。
编辑2
在底部逐渐消失的图片。
p{
width:300px;
max-height:300px;
overflow:hidden;
}
p:before{
content:"";
display:block;
position:absolute;
margin-top:240px;
background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
height:60px;
width:300px;
}
http://jsfiddle.net/MM29r/9/
编辑3
在旧版浏览器中实现图片渐隐效果(使用真实图片链接,而非base64编码)
http://jsfiddle.net/MM29r/13/