0

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

我将如何使基于字符串调整的宽度始终为 4 行高？

更新：

这是诀窍：

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

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

4

2 回答 2

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);
  }
});

​</p>

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

希望能帮助到你...

或者使用省略号方法。

如果内容太宽，请在 HTML 标记中插入省略号 (...)

于 2012-06-26T15:48:07.283 回答
0

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

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

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

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

于 2012-06-26T15:28:09.893 回答