#javascript #html
#javascript #HTML
Вопрос:
Итак, кто-нибудь из вас знает, как проверить, проходит ли мой текст, который находится внутри тега 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 строки..
Могу ли я в любом случае добиться этого?
Комментарии:
1. Как вы определяете, что текст превышает строку? Вы хотите учитывать только новые строки или хотите учитывать мягкую / жесткую перенос?
2. Итак, в основном я включил многоточия, используя webkit, чтобы установить 2 точки ‘..’ если он простирается на 2 строки, мне просто нужно знать, есть ли какой-либо аналогичный способ, которым я мог бы показывать всплывающее окно только тогда, когда оно превышает 2 строки.. @Taplar
Ответ №1:
Насколько я вижу, проблема заключается в следующем: вы хотите определить момент, когда текст в 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;
});