Calculate height left for paragraph / subtract elements in JavaScript

Question

I want to crop text and found ways to do that. The problem is they work on height and i don't know the height because the heading above can have 1, 2, 3... lines.

So i need to get the height of the outer element and subtract the heading height.

var list = document.body.getElementsByClassName("cropText");
for (var i = 0; i < list.length; i++) {
  cropTextToFit(list[i]);
}

function cropTextToFit (o) {
  var containerHeight = o.clientHeight;
  var head = document.getElementsByTagName("H2");
  var headHeight = head.clientHeight;

  console.log(containerHeight);
  console.log(headHeight);

}

cropText is the article tag where the heading and the paragraph are in.
headHeight shows "undefined" and "containerHeight" is wrong...

Please share full working code snippet.... – Abhisar Tripathi Aug 26 '19 at 07:33 — Abhisar Tripathi, Aug 26 '19 at 07:33
Use offsetHeight instead of clientHeight? – Every Screamer Aug 26 '19 at 08:01 — Every Screamer, Aug 26 '19 at 08:01

score 0 · Answer 1 · answered Aug 26 '19 at 08:05

0

Firstly you need to find the <H2> tag within the cropText element (o in your function), document.getElementsByTagName("H2") will return an array of all the <H2> s in the document

Presuming there is only one h2 inside the cropText element you need something like

var head  = o.querySelector('h2');

Also, to work out the total h2 height you will need offsetHeight + the height of the top and bottom margins

answered Aug 26 '19 at 08:05

kevmc

1,284
7
8

I changed my margin to padding so offsetHeight should do it? But i get 40px and 64px even if both headings in two divs are two rows (64px). – MrGlasspoole Aug 26 '19 at 09:44
Yes, offsetHeight includes padding and borders https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight – kevmc Aug 26 '19 at 09:47
offsetHeight and clientHeight show the same values in the log? And the values for the container are wrong. The container has a image that is 220px height but i get values like 110, 86... – MrGlasspoole Aug 26 '19 at 09:55
The height of an element can change as things like images and webfonts load. If the image does not have a height and width set (either in the html or the css) then its dimensions are not known until after the image has loaded. Text that uses a webfont will re-render once its font file has loaded. This may well cause it to break onto an extra line if the webfont has wider characters than the default one. – kevmc Aug 26 '19 at 10:38
so how to deal with that. I wonder i can't find something with google. But other people also should have this problem in responsive design. – MrGlasspoole Aug 26 '19 at 13:48
If it is images that cause your issues you could simply add in the width and height in the html (or set it in your css), alternatively you will need to add an event listener to each image, listening for the load event, and once all images are loaded do your calculations. If its a webfont then its a bit trickier to tell when they are loaded see https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded – kevmc Aug 27 '19 at 07:52
the width is set to min/max. If you give them fixed sizes its not responsive anymore. – MrGlasspoole Aug 27 '19 at 09:50
If you know the image dimensions you can put them in the html. The css width settings will override them, but the browser will be able to work out the required height without having to download the image first. Eg for a 300px x 200px image `` – kevmc Aug 27 '19 at 19:11

score 0 · Answer 2 · answered Aug 26 '19 at 08:07

0

getElementsByTagName returns more objects and param clientHeight not avaliable. Use head[i]

answered Aug 26 '19 at 08:07

Pavlishin Nikita

29
1
5

Calculate height left for paragraph / subtract elements in JavaScript

2 Answers2