Блог

Итак, кто-нибудь из вас знает, как проверить, проходит ли мой текст, который находится внутри тега div, по строкам, если это так, я мог бы добавить всплывающее окно с помощью bootstrap, чтобы показать остальной текст.

jsp:

   <div id="menu-description" class="description-wrapper" data-toggle="popover"
        data-placement="bottom" data-content="${product.description}">
      ${product.description}
  </div>
  

Javascript:

     $('[data-toggle="popover"]').popover();

  

Итак, приведенный выше код содержит всплывающую часть кода, чего мне нужно добиться, так это того, что если текст (описание) внутри превышает только 2 строки, мне нужно показывать всплывающее окно, а не когда есть одна строка, потому что это не имеет никакого смысла, если это так.

К вашему сведению: я включил многоточия, используя webkit, чтобы установить 2 точки ‘..’ если он простирается на 2 строки, мне просто нужно знать, есть ли какой-либо аналогичный способ, которым я мог бы показывать всплывающее окно только тогда, когда оно превышает 2 строки..

Могу ли я в любом случае добиться этого?

Насколько я вижу, проблема заключается в следующем: вы хотите определить момент, когда текст в div занимает более двух строк. В большинстве случаев мы не устанавливаем фиксированный горизонтальный размер в контейнерах div, чтобы сохранить гибкую структуру всей страницы. Вот почему один и тот же блок текста может иметь разный номер строки в зависимости от текущей ширины окна. Чтобы преодолеть эту проблему, мы можем использовать Resize Observer API. Если мы знаем высоту строки и высоту контейнера div, мы можем узнать, когда текст занимает более двух строк.

Вот пример кода, который вы можете протестировать в codepen.io .

HTML:

 <div id="content">
  <p id="text">Short text</p>
</div>
<button id="add-text">Add text</button>
<button id="clear-text">Clear text</button>
  

CSS:

 #content {
  max-width: 200px;
  width: 100%;
  background: #d4f4c7;
}
#text {
  line-height: 20px;
  font-size: 16px;
}
  

JS:

 const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
     const p = entry.target,
           height = entry.target.offsetHeight;
     let lineHeight = window
                      .getComputedStyle(p)
                      .getPropertyValue('line-height')
                      .replace('px', '') / 1;
     if (height/lineHeight >= 2) {
       alert('Too many lines');
     }
  }
});
ro.observe(document.querySelector('#text'));
document
  .querySelector('#add-text')
  .addEventListener('click', event => {
     const newText = 'The very long story about one request that could not be resolved';
     const text = document.querySelector('#text');
     text.innerHTML = newText;
  });
document
  .querySelector('#clear-text')
  .addEventListener('click', event => {
     const newText = 'Short text';
     const text = document.querySelector('#text');
     text.innerHTML = newText;
  });