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 with line-height

$(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

Answer 2

编辑：我没有完全阅读你的问题。这里有一些更符合你要求的东西。

为了动态地获得4行高度，你必须创建一个CSS类来包含文本的样式（例如font-size和whatnot），然后你可以这样做：

var p = document.createElement("p");
p.innerHTML = "random text";
$(p).addClass("textStyle");
var fourLineHeight = parseInt($(p).css("line-height")) * 4;

编辑2：正如samsamX指出的那样，行高会更好。

使用jquery调整宽度，所以p元素是4行高

2 个答案: