html文字纵向排列切断,html – 避免垂直切断文本/字符

我已经限制了Bootstrap中缩略图框内文本区域的高度,但是在标题是两行或更多行的情况下,它会将文本的最后一行垂直切成两半.看这里：

由于文本框有两种字体大小(标题较大,描述较小,动态且长度不同),设置行高无济于事.溢出：隐藏不会隐藏整行文本,只会溢出溢出的部分.添加文本溢出：省略号或类似不会阻止半行显示.

我已经回顾了以前的这些帖子,但它们似乎没有提供适用于我的案例的答案：

我已经提到过Bootstrap,以防任何人在使用他们的缩略图类时找到解决方案,但这确实是一个更普遍的问题.有没有办法阻止切线高度发生,最好是在CSS？

谢谢！

编辑：对于那些不想要bootply链接的人,这是我的CSS：

.container {

margin-top: 20px;

}

.thumbnail .caption h3 {

margin-top: 8px;

margin-bottom: 8px;

}

.thumbnail-text {

overflow: hidden;

height: 160px;

margin-bottom: 10px;

}

和HTML：

最佳答案

我已经写了一些非常好的jQuery来计算可见的行数,然后将其限制为该数量

$(".thumbnail-text").each(function() {

//start with 0 height

h=0;

//calculate height consumed by title

$(this).find("h3").each(function() {

h+=$(this).outerHeight();

});

//calculate height left over for text

h=160-h;

//determine the line height of the text

lineHeight=parseFloat($(this).find("p").first().css("line-height"));

//determine the amount of lines that can fit in the height left for the text

lines=Math.floor(h/lineHeight);

//set the height of the 'p' to be the lines * lineHeight

$(this).find("p").first().css("height",(lines*lineHeight)+"px");

});

我也改变了你的css,所以现在p元素被设置为overflow：hidden并且有margin-bottom

.thumbnail-text p {

overflow: hidden;

margin-bottom: 10px;

}

我知道这是一个特定于案例的解决方案,但解决方案背后的概念将适用于任何事情

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！