adding offset to each lines

Question

hello, First, sorry for such lousy description, I am new to javascript, so excuse my lack of actual code:

having a block of text rendered in a browser, text, in order to fit the space, will break into rows, I need to find where the newlines to add a new line some offset, then subtract the offset from the row word lenght (if needed) and get a new cicle untill there is something to do.

I was actually hoping to get an answer on the splitting on newlines, or at least finding out how long a row is by pixels.

thanks in advance :)

Answer 1

As far as I am aware, the only way to check the width of some text is to render that text in a hidden element and then check the width of that element. Continue doing this until you get the longest string which is less than your desired maximum width. Rinse and repeat.

I assume that you're trying to fit your text into an arbitrary/irregular shape: if it's just a rectangle, then of course, you could just set the width of a container element.

Answer 2

To get the width of a row you can use the

width()

function

and to get the height you can use

height() function

<script>
$(document).ready ( function() {
    alert ( $("#tr1").width() );
    alert ( $("#tr1").height() );
});

</script>
<table>
<tr id="tr1">
<td>test test testtest test testtest test testtest test test
</td>
<td>test test testtest test testtest test testtest test test
</td>
<td>test test testtest test testtest test testtest test test
</td>
</tr>
</table>

Answer 3

Why not use the element offset?

<div id="somediv" style="height:20px;width:100px;">
 some content that wrap and makes new line  some content that wrap and makes new line  some content that wrap and makes new line  some content that wrap and makes new line 
</div>

<script>
    var d=document.getElementById("somediv");
    alert(d.style.height);//outputs 20px
    alert(d.offsetHeight);//outputs the actual/rendered height used by the element
</script>