Как я могу имитировать переполнение текста:многоточие в Firefox?
https://stackoverflow.com/questions/1820384
-
10-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть динамический текст, содержащийся в 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».Он работает в случае ввода одного слова, например «WWWWWWWWWWWWWWWWWW», но не работает для ввода нескольких слов «WWWWW WWWWW WWWWW», поскольку он просто добавляет разрывы строк и измеряет текст по ширине «WWWWW».
Можно ли это исправить, не прибегая к копированию текста в скрытый измерительный элемент?Какой-нибудь способ установить стиль строковых элементов управления, чтобы они не переносили текст?
Решение
Какой-нибудь способ установить стиль строки div, чтобы они не переносили текст?
Там у вас есть пробел: nowrap для. Да, это работает и в древних браузерах.
Другие советы
Эта проблема, должно быть, работает и в Firefox.
HTML
<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>
CSS
.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}
привязки.xml
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
<content><children/></content>
</binding>
<binding id="ellipsis">
<content>
<xul:label crop="end"><children/></xul:label>
</content>
<implementation>
<field name="label">document.getAnonymousNodes(this)[0]</field>
<field name="style">this.label.style</field>
<property name="display">
<getter>this.style.display</getter>
<setter>if(this.style.display!= val)this.style.display=val</setter>
</property>
<property name="value">
<getter>this.label.value</getter>
<setter>if(this.label.value!=val)this.label.value=val</setter>
</property>
<method name="update">
<body>
var strings= this.textContent.split(/\s+/g)
if(!strings[0])strings.shift()
if(!strings[strings.length-1])strings.pop()
this.value=strings.join('')
this.display=strings.length?'':'none'
</body>
</method>
<constructor>this.update()</constructor>
</implementation>
<handlers>
<handler event="DOMSubtreeModified">this.update()</handler>
</handlers>
</binding>
</bindings>
Если вы используете jQuery, я использую отличный плагин .
Кроме того, [этот пример] (404 НЕ НАЙДЕН!) может работать в разных браузерах.
Любые вопросы, напишите мне в комментариях!
404 ссылка: http://www.hedgerwow.com/360/ DHTML / text_overflow / demo2.php
Новая версия CSS (CSS3) должна включать text-overflow: ellipsis , которая делает это за вас. В настоящее время он работает в IE версии 6 и выше, а также в Safari и Chrome. Это не поддерживается Firefox, так что это пока не очень полезный ответ, но стоит помнить, что в конечном итоге лучшим способом будет позволить CSS справиться с этим.
Черновик спецификации CSS3: http: //www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props
Поддерживаемые браузеры: http://www.quirksmode.org/css/contents.html (прокрутите вниз до «переполнение текста» внизу)
Проще говоря, нет, нет лучшего способа, не прибегая к взломам.
Вы можете, например, использовать абсолютный интервал position: position для " ... " поверх фактического содержимого с параметром overflow: hidden, установленным для контейнера, и скрывает дополнительный интервал, только если содержимое помещается в контейнер. Это позволило бы вам запустить код усечения только один раз.
Лично я бы просто запустил вычисление ширины пикселя несколько раз. Задание текста и чтение ширины - это быстрая операция, поэтому она не должна быть заметна.
Используйте переполнение текста: многоточие . Это не только для IE ... Большинство крупных браузеров могут сделать это.
Но если вы не можете здесь это плагин JQuery для этого.
Чтобы ответить только на один из вопросов, которые вы подняли:
Так что, если это 20 символов, и я нахожу что это не подходит, мне бы пришлось усечь до 19, добавить многоточие и затем проверьте, подходит ли он снова. затем обрезать до 18 (плюс многоточие) и Попробуйте снова. И опять. А также снова ... пока не подойдет. Есть ли лучше?
Более быстрый способ найти правильную длину - разрезать строку пополам, проверить, подходит ли она. Если это так: добавьте четверть оригинальной длины обратно, и если она не будет отрезана на четверть, проверьте это, чтобы убедиться, что она подходит. Повторите рекурсивно с 1/8-й, 1/16-й, 1/32-й, ... от первоначальной длины, пока это значение сложения / вычитания не станет меньше 1.
Это алгоритм поиска: для строк, длина которых превышает несколько слов, вы обычно можете сократить количество тестов, которые необходимо выполнить в DOM, в 10 раз.
Попробуй это:
Обновлять:
Если вы используете фирменный {word-wrap:Break-word;}, IE принудительно перенесет строку.Современные браузеры могут иметь значение по умолчанию {overflow:видимый;}, и они будут правильно переполняться, не расширяя контейнер.
Нет, это не простая задача. Я должен был сделать то же самое год назад и обнаружил, что даже Internet Explorer (с версии 6), Opera и Safari могут это сделать, но не Firefox. Извините, только хаки могут спасти вас
С Opera:
-o-text-overflow:ellipsis;
Я изменил this.value = strings.join ('') на this.value = strings.join ('') с Биньямина ответили, и у меня все заработало нормально!
О Firefox 4.0 и все еще не реализованном текстовом переполнении : ellipsis CSS:
Эта ссылка дает частичное решение к проблеме.
Результат аналогичен переполнению текста: ellipsis с использованием только css.
