Detect if the html element is being pushed to the new line on zoom or windows larger text size-CodePudding

I have 2 labels side by side and because of the system text size 150%(which is recommended) in the windows, the second label is not having enough space and it floats below. I just want to just find out if the second label is going into the new line or not using javascript or css. So that I can change the 1st label accordingly.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<label >testing out label1</label>
<label (click)="method()" >
        <em ></em>
        testing label 2 testing
      </label>

when the label2 is being pushed below, I want to remove the text "testing out" from label1.
Note: the browser will be on 100% zoom only when the windows is having text size of 150%.

CodePudding user response：

I recreated your situation and using getBoundingClientRect() does work. For me it returns 24 as a difference.

Even if I zoom (text-only) until the second element completely wraps into the second line, it’s providing a difference.

document.querySelector('button').addEventListener('click', _ => {
  [l1, l2] = document.querySelectorAll('.label');
  alert(l2.getBoundingClientRect().top- l1.getBoundingClientRect().top);
});

document.querySelector('input[type="checkbox"]').addEventListener('change', e => document.querySelector('.wrapper').classList.toggle('narrow', e.currentTarget.checked));

.wrapper {
  border: 1px dashed gray;
}

.narrow {
  width: 10em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div >
  <span >testing out label1</span>
  <span >
    <em ></em> testing label 2 testing
  </span>
</div>

<label><input type="checkbox"> Make elements wrap</label>
<br>
<button>Get difference in top coordinates</button>