Как добавить атрибут title при определенном условии?

Рейтинг: 0Ответов: 1Опубликовано: 07.07.2023

Подскажите, пожалуйста, как добавить атрибут title только если в блоке обрезанный текст?

Если текст, не обрезанный, и помещается полностью title не нужен.

120px - это условная ширина, она может быть любая другая

document.querySelectorAll('.item').forEach( el => {
  el.setAttribute('title', el.innerHTML);
});
.item {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="item">Обрезанный текст</div>
<div class="item">Необрезанный</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Например вот так:

document.querySelectorAll('.item').forEach( el => {
  if (el.scrollWidth > el.offsetWidth) {
    el.setAttribute('title', el.innerHTML);
  }
});
.item {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="item">Обрезанный текст</div>
<div class="item">Необрезанный</div>

Суть в том, что scrollWidth включает в себя содержимое контейнера в том числе и то, что не отображается, в отличие от offsetWidth. Соответственно если первое больше второго, значит, что произошло переполнение.

Идея взята отсюда