У меня есть динамический текст, содержащийся в div, который настроен на то, что пользователь вводит в поле текстового поля. Если текст не вписывается в div, теперь он просто обрезается по краю, и весь текст, который проходит мимо границы, не отображается. Я хотел бы обрезать текст так, чтобы он помещался внутри коробки и имел в конце многоточие (...). Например:Как я могу имитировать переполнение текста: многоточие в Firefox?
|----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 «divs передаются функции. Он работает в случае ввода одного слова как «WWWWWWWWWWWWWWWWWW», но не работает многословный ввод «WWWWW WWWWW WWWWW», потому что он просто добавляет разрывы строк и измеряет текст как ширину «WWWWW».
Есть ли способ исправить это, не прибегая к копированию текста в скрытый измерительный элемент? Какой-то способ установить стиль разделителей строк так, чтобы они не обтекали текст?
Это теперь поддерживается изначально в Firefox 7! –