CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Johnson
Johnson

Reputation: 37

adjust width using jquery so p element is 4 lines tall

Say I had a string of unknown length made up of regular characters.

How would i make it so that the width adjusted based on the string to always be 4 lines tall?

UPDATE:

This is does the trick:

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

Makes sense.. You would expect that if you wanted to increase the height 4 times, you would decrease the width 4 times

Upvotes: 0

Views: 126

Answers (2)

Val
Val

Reputation: 17522

I don't know what you are trying to do but it sounds like you are trying to do something that does not need to be done, however here is a number of ways I would do it.

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

CSS ONLY

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

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

​

Here is the jsfiddle for it... http://jsfiddle.net/xRxga/1/

Hope it helps...

or alternatively use the ellipsis method.

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

Upvotes: 1

BenR
BenR

Reputation: 2936

Edit: I didn't fully read your question. Here's something a little more gears towards what you're asking for.

In order to get exactly 4 lines in height dynamically, you have to create a CSS class to include your text's styling (such as font-size and whatnot), then you can do this:

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

Edit 2: As samsamX pointed out, line-height would be better.

Upvotes: 0

Related Questions