Calculate how many lines will be used in div?

Question

In the snippet below there are four divs with 33 characters each. Depending on the width and the word wrapping, the div can take one, two or three lines. What is a good way to calculate this beforehand?

The reason I need this is because I use a React List component (https://bvaughn.github.io/react-virtualized/#/components/List) which accepts a fixed value for the height of a list item or a function to calculate the height of a list item depending on the index. Using that index I can retrieve the text that will be in the div and get the width of the list using JavaScript. From these variables I can hopefully calculate the appropriate height.

.p100 {
  width: 100px;
}

.p150 {
  width: 200px;
}

<div id="div1" class="p100">
  Hello Hello Hello Hello Hello
</div>
<hr>
<div id="div2" class="p100">
  abcd abcd abcd abcd abcd abcd
</div>
<hr>
<div id="div3" class="p150">
  Hello Hello Hello Hello Hello
</div>
<hr>
<div id="div4" class="p150">
  abcd abcd abcd abcd abcd abcd
</div>

If you set the width/height to `auto` the div will be large enough to contain its content. — , Feb 17 '17 at 22:11
What do you mean by "calculate this beforehand"? Like store the amount of lines as a JavaScript variable? Or find the amount of lines in CSS? — Tyler Roper, Feb 17 '17 at 22:11
Next to the question from @Santi could you please also say why you want this? Maybe there is another solution to fix whatever you're after — caramba, Feb 17 '17 at 22:14

score 2 · Accepted Answer · answered Feb 18 '17 at 00:15

The reason I need this is because I use a React List component...which accepts a fixed value for the height of a list item or a function to calculate the height of a list item depending on the index.

Hi :) Author of react-virtualized here.

I think you should check out the CellMeasurer component. I created it for use cases like the one you're describing. Check out a demo here and docs here.

Essentially, CellMeasurer would allow you to defer measuring your text until runtime. List could use an estimated size until then for rows that aren't yet visible.

Hi Brian! Thanks! I'll try and let you know in the Slack if I run into problems. — Michiel Borkent, Feb 18 '17 at 09:40

score 0 · Answer 2 · answered Feb 17 '17 at 22:17

0

It almost seems that you are saying you want to know how much lines you have left before the words overlap you divs.

If that is the case you can change the width to width:auto or set it to 100%. This way, it will expand with your 'lines'.

answered Feb 17 '17 at 22:17

I added my motivation. I cannot set the width, it's a given. – Michiel Borkent Feb 17 '17 at 22:25

score 0 · Answer 3 · answered Feb 17 '17 at 22:41

0

By jquery you can have width and height of each div by:

$('#the-div-id').width();
$('#the-div-id').height();

and javascript:

document.getElementById('the-div-id').clientWidth;
document.getElementById('the-div-id').clientHeight;

answered Feb 17 '17 at 22:41

Farzin Kanzi

3,380
2
21
23

I need to calculate what the height will be (depending on the amount of text and the width), before rendering this. – Michiel Borkent Feb 17 '17 at 22:49
So i do not think javascript could help, I think it must calculate in server. – Farzin Kanzi Feb 17 '17 at 22:51
Maybe you are designing a very special thing, else it is not normal what you want and there will be better ways. – Farzin Kanzi Feb 17 '17 at 22:55

Calculate how many lines will be used in div?

3 Answers3