У меня есть динамический текст, содержащийся в 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 (плюс многоточие) и повторите попытку. И опять. И снова... пока это не подойдет. Есть ли лучший способ?
EDIT: Я решил основать на ответах, что мой оригинальный подход лучше всего, за исключением того, что я попытался улучшить решение в ссылке выше, не создавая отдельный элемент 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;
}
}
Диффы "line1" и "line2" передаются функции. Он работает в случае ввода одного слова как "WWWWWWWWWWWWWWWWWW", но не работает многословный ввод "WWWWW WWWWW WWWWW", потому что он просто добавляет разрывы строк и измеряет текст как ширину "WWWWW".
Есть ли способ исправить это, не прибегая к копированию текста в скрытый измерительный элемент? Какой-то способ установить стиль разделителей строк так, чтобы они не обертывали текст?
