开发者

Adding offset to each line

开发者 https://www.devze.com 2022-12-08 08:57 出处:网络
I am new to javascript, so excuse my lack of actual code. I have a block of text that I want to fit into a s开发者_开发百科pace. I want to break it into rows. I need to find where the newlines are to

I am new to javascript, so excuse my lack of actual code.

I have a block of text that I want to fit into a s开发者_开发百科pace. I want to break it into rows. I need to find where the newlines are to add a new line and some offset. Then I want to subtract the offset from the row word length (if needed) and get a new cycle until 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.


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>


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.


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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号