Обрізання довгих рядків за допомогою CSS: можливо ще?

Чи є якийсь хороший спосіб обрізання тексту звичайним HTML та CSS, щоб динамічний вміст міг вміщуватися у макеті з фіксованою шириною та висотою?

Я обрізав сторону сервера за логічною шириною (тобто сліпо здогадалася кількість символів), але оскільки 'w' ширше, ніж 'я', це, як правило, неоптимальне, а також вимагає від мене повторного відгадки ( і продовжуйте налаштовувати) кількість символів для кожної фіксованої ширини. В ідеалі усічення відбудеться в браузері, який знає фізичну ширину викладеного тексту.

Я виявив, що IE має text-overflow: ellipsisвластивість, яка робить саме те, що я хочу, але мені це потрібно для перехресного перегляду. Ця властивість здається (дещо?) Стандартною, але не підтримується Firefox. Я знайшов різні способи вирішення на основі overflow: hidden, але вони або не показують еліпсис (я хочу, щоб користувач знав, що вміст був усічений), або відображати його весь час (навіть якщо вміст не був усічений).

Хто-небудь має хороший спосіб розміщення динамічного тексту у фіксованому макеті, чи відрізання на стороні сервера логічної ширини настільки ж добре, як я збираюся зараз отримати?

Оновлення: text-overflow: ellipsisтепер підтримується Firefox 7 (вийшов 27 вересня 2011 року). Так! Моя оригінальна відповідь випливає як історичний запис.

Джастін Максвелл має крос-браузерне CSS-рішення. Однак це має і зворотний бік, але не дозволяє текст вибирати у Firefox. Перегляньте його гостьовий пост у блозі Метта Снайдера, щоб отримати детальну інформацію про те, як це працює.

Зауважте, що ця методика також запобігає оновленню вмісту вузла в JavaScript за допомогою innerHTMLвластивості Firefox. Дивіться кінець цієї публікації для вирішення проблеми.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml вміст файлу

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Оновлення вмісту вузла

Для оновлення вмісту вузла способом, що працює у Firefox, використовуйте наступне:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Дивіться пост Метта Снайдера для пояснення того, як це працює .

Березень 2014 року: обрізання довгих рядків за допомогою CSS: нова відповідь з акцентом на підтримку браузера

Демонстрація на http://jsbin.com/leyukama/1/ (я використовую jsbin, оскільки він підтримує стару версію IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

Властивість -ms-text-overflow CSS не потрібна: це синонім властивості CSS-переповнення тексту, але версії IE від 6 до 11 вже підтримують властивість CSS-переповнення тексту.

Успішно протестовано (на Browserstack.com) в ОС Windows для веб-браузерів:

• Від IE6 до IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: як вказував Саймон Лішке (в іншій відповіді), Firefox підтримує лише властивість CSS-переповнення CSS від Firefox 7 далі (випущена 27 вересня 2011 року).

Я двічі перевірив цю поведінку на Firefox 3.0 та Firefox 6.0 (переповнення тексту не підтримується).

Потрібно додаткове тестування веб-браузерів Mac OS.

Примітка: ви можете показати підказку при наведенні миші, коли застосовано еліпсис, це можна зробити за допомогою javascript, див. Ці питання: Виявлення еліпсису з переповненням тексту та HTML - як я можу показувати підказку ТІЛЬКИ, коли активований еліпсис

Ресурси:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Якщо ви все в порядку з рішенням JavaScript, є плагін jQuery, щоб зробити це в крос-браузерному режимі - див. Http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

Добре, Firefox 7 реалізований text-overflow: ellipsisтакож text-overflow: "string". Остаточний реліз запланований на 2011-09-27.

Іншим рішенням проблеми може стати такий набір правил CSS:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Єдиний недолік вищевказаного CSS полягає в тому, що він додасть "..." незалежно від того, переповнює текст контейнер чи ні. Але якщо у вас є випадок, коли у вас є маса елементів і ви впевнені, що вміст переповниться, це буде більш простим набором правил.

Мої два центи. Капелюхи від оригінальної техніки Джастіна Максвелла