V-дата-стол: усечение ellipsis, вызывая непоследовательный дисплей субъекта и поведение выскочки инструментов ⇐ CSS

[Anonymous]

Я использую v-data-stable для отображения списка соответствий, где каждая переписка имеет субъект. Из-за длинных предметных текстов я применил Ellipsis (Text-Overflow: Ellipsis), чтобы усекнуть их. Тем не менее, я сталкиваюсь с двумя проблемами: < /p>

В некоторых случаях субъект полностью исчезает при укорочке. < /Li>
Когда Субъект усечен, но все еще видна, выявление инструментов не показывается последовательно. Иногда появляется, но в других случаях это не так.
Как я могу исправить эти проблемы, чтобы гарантировать, что текст субъекта правильно усечен, а подсказка постоянно показывает при падении над усеченным текстом? < /Li>
< /ol>



{{ item.subject }}


{{ item.subject }}



< /code>
.td-text-limit {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.015em;
color: var(--content-color) !important;
text-decoration: none;
width: fit-content;
}
< /code>
The correspondences are being loaded from the server, and after they finish loading, I implemented this to show the tooltip, which resulted in the two issues:
showTooltips()
{
var elements = document.getElementsByClassName('td-text-limit');
for (var i = 0; i < elements.length;)
{
var element1 = elements;
var element2 = elements[i + 1];
var showTooltip = element1.offsetHeight < element1.scrollHeight;
if (element1.id.lastIndexOf('ellipsisElements') != -1 && element2.id.lastIndexOf('ellipsisElements') != -1)
{
if (showTooltip) {
element1.style.display = 'none';
element2.style.display = '-webkit-box';
}
else {
element1.style.display = '-webkit-box';
element2.style.display = 'none';
}
}

i = i + 2;
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... -and-toolt