0

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

Johnson
  • 37
  • 4
  • @SethenMaleno Why should that matter? Certainly I don't advocate giving the OP "teh c0dez" but it's possible the OP is stuck even at the concept level. Thus the answer to that question would be "nothing because I don't know where to start", and that does not make this an invalid question. – Platinum Azure Jun 26 '12 at 15:19
  • 2
    The point of this community is not to just fork over code, it's about at least researching the problem first, explaining what you've tried and showing what your thought process behind the things you've tried are. THUS, Posting "I don't know where to start.." is not an acceptable answer when you haven't even started. It's perfectly fine to ask what has been tried. Heck, there isn't even any code in OP's answer. How do I submit an answer without knowing what the environment looks like anyways? – Sethen Jun 26 '12 at 15:25
  • i don't know where to start? I tried looking around for a solution. i considered attempting to get the width of the paragraph while it was 1 line and then split it up into 4 pieces, but that's inconsistent and sloppy. i don't necessarily need code so if you don't want to provide me with any, some conceptual help would be greatly appreciated – Johnson Jun 26 '12 at 15:40
  • @max check my answer I think this is what you was looking for if not, sorry :) – Val Jun 26 '12 at 15:49
  • @max check the demo on this link http://jsfiddle.net/xRxga/1/ – Val Jun 26 '12 at 15:52
  • @max it does NOT make sense, if the height of `p` is `150px` using your method it will be `600px` height and width only decreases which will not make the height go to 4 lines but almost never :) – Val Jun 26 '12 at 15:58
  • this is assuming the p is the height of 1 line. you can alter it to use line height if you would like – Johnson Jun 26 '12 at 16:04

2 Answers2

1

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

Community
  • 1
  • 1
Val
  • 17,336
  • 23
  • 95
  • 144
0

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.

BenR
  • 2,791
  • 3
  • 26
  • 36