使用 jQuery 调整宽度，使 p 元素高 4 行

adjust width using jquery so p element is 4 lines tall

本文关键字：元素 jQuery 调整 使用      更新时间：2023-09-26

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

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

更新：

这是诀窍：

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

意义。。你会期望，如果你想增加4倍的高度，你会减少4倍的宽度

我不知道

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

<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/

希望对你有帮助...

或者使用省略号方法。

如果内容太宽，则在 HTML 标记中插入省略号 （...）

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

为了动态获得 4 行的高度，您必须创建一个 CSS 类来包含文本的样式（例如字体大小等），然后您可以这样做：

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

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

相关文章：