javascript - 使用 jquery 调整宽度，使 p 元素高 4 行

Question

假设我有一个未知长度的字符串，由常规字符组成。

我如何才能使根据字符串调整的宽度始终为 4 行高？

更新:

这就是诀窍:

$("p").css({height: $("p").height()*4});
$("p").css({width: $("p").width()/4});

有道理..你会期望如果你想增加 4 倍的高度，你会减少 4 倍的宽度

Answer 1

我不知道你想做什么，但听起来你正在尝试做一些不需要做的事情，但是这里有很多我会做的方法。

<p class="my_p">Blabla</p>

仅 CSS

<style>p.my_p{height: 40px; overflow: hidden;}</style>

或带行高的jQuery

$(function (){
var p = $('.my_p');
var lh = p.css('line-height');
var x = 0;
var i = false;
while (i!='done')
  {
   if(x>3500) i='done';//prevent infinite loop
   x++; 
   lh = parseInt(p.css('line-height'))*4;
   if(p.height()==lh){ i='done'; console.log('done') }
   else p.width(p.width()+1);
  }
});

这是它的 jsfiddle... http://jsfiddle.net/xRxga/1/

希望对你有帮助

或者使用省略号方法。

Insert ellipsis (...) into HTML tag if content too wide