html– 避免垂直切断文本字符

html– 避免垂直切断文本字符,第1张

概述我已经限制了Bootstrap中缩略图框内文本区域的高度,但是在标题是两行或更多行的情况下,它会将文本的最后一行垂直切成两半.看这里:http://www.bootply.com/zBXG6in5R5由于文本框有两种字体大小(标题较大,描述较小,动态且长度不同),设置行高无济于事.溢出:隐藏不会隐藏整行文本,只会溢出溢出的部分.添加文本溢出:省略号或类似不会

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

http://www.bootply.com/zBXG6in5R5

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

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

> Can I completely hide lines of text that are half cut off?
> Sentence showing half at end of the div,overflow: hidden is cutting the sentence

我已经提到过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;}

链接 – > http://www.bootply.com/1pZoRkUHOj

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

总结

以上是内存溢出为你收集整理的html – 避免垂直切断文本/字符全部内容,希望文章能够帮你解决html – 避免垂直切断文本/字符所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1121882.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)