Как может я подражать текстовому переполнению: замещающий знак в Firefox?

Попробуйте следующее:

Link One

Обновление:

Если вы используете проприетарный {word-wrap: break-word;}, IE принудительно переводит строку. Современные браузеры могут иметь значение по умолчанию {overflow: visible;}, и они будут переполняться правильно, без расширения контейнера.

Используйте переполнение текста: многоточие . Это не только для IE ... Большинство основных браузеров умеют это делать.
Но если вы не можете , вот плагин jQuery для этого.

попробуйте dojox.html.ellipsis

No, it's not simple task. I had to do same thing year ago and found that even Internet Explorer (from version 6), Opera and Safari can do it, but no Firefox. So sorry, only hacks can save you

Проще говоря, нет, нет лучшего способа не прибегать к хакам.

Вы могли бы, например, использовать диапазон position: absolute, чтобы расположить "..." поверх фактического содержимого с переполнением: скрытый набор в контейнере, и скрыть лишний диапазон только в том случае, если содержимое помещается в контейнер. Это позволит вам запустить код усечения только один раз.

Лично я бы просто провел вычисление ширины в пикселях еще несколько раз. Установка текста и считывание ширины - это быстрая операция, поэтому она не должна быть заметной.

Вы могли бы, например, использовать диапазон position: absolute для размещения вашего "..." поверх фактического содержимого, с параметром overflow: hidden в контейнере, и только скрыть лишний диапазон, если содержимое помещается в контейнер. Это позволит вам запустить код усечения только один раз.

Лично я бы просто провел вычисление ширины в пикселях еще несколько раз. Установка текста и считывание ширины - это быстрая операция, поэтому она не должна быть заметной.

Вы могли бы, например, использовать диапазон position: absolute для размещения вашего "..." поверх фактического содержимого, с параметром overflow: hidden в контейнере, и только скрыть лишний диапазон, если содержимое помещается в контейнер. Это позволит вам запустить код усечения только один раз.

Лично я бы просто провел вычисление ширины в пикселях еще несколько раз. Установка текста и считывание ширины - это быстрая операция, поэтому она не должна быть заметной.

Лично я бы просто провел вычисление ширины в пикселях еще несколько раз. Установка текста и считывание ширины - это быстрая операция, поэтому она не должна быть заметной.

Лично я бы просто провел вычисление ширины в пикселях еще несколько раз. Установка текста и считывание ширины - это быстрая операция, поэтому она не должна быть заметной.

Новая версия 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 (прокрутите вниз до "переполнения текста" внизу)

If you're using jQuery, there's a great plugin I use.

Alternatively, [this example] (404 NOT FOUND!) seems to work cross browser.

Any questions, hit me up in the comments!

404 link: http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

Чтобы ответить только на один из поднятых вами вопросов:

Итак, если это 20 символов, и я нахожу что это не подходит, мне пришлось бы обрезать до 19, добавить многоточие и затем проверьте, подходит ли он снова. потом усечь до 18 (плюс многоточие) и Попробуйте снова. И снова. А также снова ... пока он не подошел. Есть ли лучший способ?

Гораздо более быстрый способ найти правильную длину - разрезать струну пополам, проверить, подходит ли она. Если это так: снова добавьте четверть исходной длины, и если она не отрежет четверть, проверьте, подходит ли она. Повторяйте рекурсивно с 1/8, 1/16, 1/32, ... исходной длины, пока это значение сложения / вычитания не станет меньше 1.

Это алгоритм поиска: для строк, которые длиннее, чем просто Несколько слов, как правило, вы можете сократить количество тестов, которые необходимо выполнить в DOM, в 10 раз.

Эта проблема должна работать и в 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
}

bindings.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>