У меня есть некоторый динамический текст, содержащийся в div, который установлен на то, что пользователь вводит в поле текстового поля. Если текст не помещается в элемент div, сейчас он просто обрезается по краю, и весь текст, который выходит за границы, не виден. Я хотел бы обрезать текст так, чтобы он помещался внутри рамки и имел многоточие (...) в конце. Например:
|----div width------|
Here is some sample text that is too long.
Here is some sam...
Очевидно, что в примере это просто, потому что кодовый тег использует шрифт фиксированной ширины, поэтому он так же прост, как и подсчет символов. У меня есть шрифт переменной ширины, поэтому, если они введут «WWWWWWWWWWW», он будет заполнен гораздо меньшим количеством символов, чем «................».
Какой лучший способ сделать это? Я нашел потенциальное решение для простого нахождения фактической ширины текста в пикселях здесь: http://www.codingforums.com/archive/index.php/t-100367.html
Но даже с таким методом немного неловко реализовать многоточие. Так что, если это 20 символов и я нахожу, что они не подходят, мне нужно будет усечь их до 19, добавить многоточие, а затем проверить, подходит ли оно снова. Затем обрежьте до 18 (плюс многоточие) и попробуйте снова. И опять. И снова ... пока не подойдет. Есть ли лучший способ?
РЕДАКТИРОВАТЬ: Я решил, основываясь на ответах, что мой оригинальный подход лучше, за исключением того, что я попытался улучшить решение по ссылке выше, не создавая отдельный элемент td просто для измерения, что выглядит как хак.
Вот мой код:
<div id="tab" class="tab">
<div id="tabTitle" class="tabTitle">
<div class="line1">user-supplied text will be put here</div>
<div class="line2">more user-supplied text will be put here</div>
</div>
</div>
И стили:
.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}
.tab .tabTitle {
height: 30px;
width: 122px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}
.tab .tabTitle .line1, .tab .tabTitle .line2 {
display:inline;
width:auto;
}
и javascript, который обрезает и добавляет многоточие:
function addOverflowEllipsis( containerElement, maxWidth )
{
var contents = containerElement.innerHTML;
var pixelWidth = containerElement.offsetWidth;
if(pixelWidth > maxWidth)
{
contents = contents + "…"; // ellipsis character, not "..." but "…"
}
while(pixelWidth > maxWidth)
{
contents = contents.substring(0,(contents.length - 2)) + "…";
containerElement.innerHTML = contents;
pixelWidth = containerElement.offsetWidth;
}
}
Div'ы line1 и line2 передаются в функцию. Он работает в случае ввода одного слова, такого как «WWWWWWWWWWWWWWWWW», но не работает многострочный ввод «WWWWW WWWWW WWWWW», поскольку он просто добавляет разрывы строк и измеряет текст как ширину «WWWWW».
Можно ли как-то исправить это, не прибегая к копированию текста в скрытый измерительный элемент? Какой-нибудь способ установить стиль строки div, чтобы они не переносили текст?