Как сократить строку в JavaScript так, чтобы это соответствовало точно двум строкам, и добавьте … в конце
У меня есть требование, где в я должен отобразить текст для двух строк и добавить..., если его переполнение Моей Ширины отделения фиксируется. (Даже высоту можно рассмотреть, как зафиксировано).
Фактический текст похож на это:
1
Lorem Ipsum просто
фиктивный текст печати
и наборная промышленность.
2
Lorem Ipsum является просто текстом
из печати и типов
промышленность.
Ожидаемый:
1
Lorem Ipsum просто
фиктивный текст печати...
2
Lorem Ipsum является просто текстом
из печати и typ...
Я не хочу перегружаться с плагинами (три точки, плагин jQuery делает это).
Я планирую сделать только путем вырезания (разделяет) строку, поскольку ширина отделения фиксируется.
Заранее спасибо.
3 ответа
Поскольку переполнение многоточия css не работает для многострочного текста, вы должны сделать это с помощью JavaScript. Вы можете скопировать текстовое поле, расположить его абсолютным с верхним -1000000px и вырезать последнюю букву текста, пока поле не будет иметь правильную высоту. Или вы просто вырежете после подсчета конкретной буквы, это будет быстрее, но не точно.
Свойство CSS text-overflow - лучший способ, но пока он поддерживается не всеми браузерами. Если вы хотите использовать Javascript, вы можете создать элемент вне экрана. Используйте CSS (сгенерированный скриптом), чтобы задать ему ту же ширину и шрифт, что и у цели, с высотой 2em (т.е. 2 строки). Запустите цикл, добавляя текст по одной букве за раз, пока у вас не закончатся буквы или не изменится высота. Когда высота увеличивается, вы знаете, что превысили две строки.
Конечно, вам также необходимо учитывать ширину символа «...», чтобы вы могли добавить его к букве, которую собираетесь добавить.
Убедитесь, что элемент находится за кадром, а не используйте "display: none", поскольку неотображаемые элементы не имеют высоты. "видимость: скрытая" может сработать; Я не пробовал.
ОБНОВЛЕНИЕ: Похоже, переполнение текста полезно только для горизонтального усечения.
Вот небольшой jQuery, который должен работать.
Попробуйте: http://jsfiddle.net/UfxYQ/
var $container = $('#container');
var $text = $('#text');
var originalText = $text.text();
var temp = originalText;
if( $container.outerHeight() < $text.outerHeight() ) {
while($container.outerHeight() < $text.outerHeight()) {
$text.text( temp = temp.substr(0, temp.length-1) );
}
$text.text( temp = temp.substr(0, temp.length-3) );
$text.append('...');
}
HTML
<div id='container'>
<span id='text'>Lorem Ipsum is simply
dummy text of the printing
and typesetting industry.
</span>
</div>
CSS
#container {
width: 150px;
height: 50px;
line-height: 25px;
position: relative;
}
У вас не будет полной кроссбраузерной поддержки, но закройте. Существует свойство CSS под названием text-overflow , которое поддерживается в IE6 +, Safari, Konqueror и Opera (со специальным свойством Opera).
#myOverflowDiv {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}