CSS Trim Table Content - PullRequest
Новая
       15

CSS Trim Table Content

1 голос
/ 03 июля 2011

Я ищу способ использовать CSS для обрезки длинного контента из ячейки таблицы.Например.скажем, данная ячейка содержит контент, который слишком длинный.Ширина таблицы регулируется в соответствии с этим действительно длинным содержимым.Однако, поскольку таблица уже занимает 100% ширины, большая часть таблицы выходит за пределы окна, чтобы соответствовать этому содержимому.

Итак, мой вопрос, есть ли способ, которым я могу использовать CSS (желательно

Ответы [ 2 ]

2 голосов
/ 04 июля 2011

Вот кросс-браузерное решение.

Добавьте это к своему CSS: 

/** Custom CSS logic to truncate text with ellipsis **/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis');
}

Добавьте этот файл (ellipsis.xml) на ваш сервер (в данном случае в / assets / xml /): 

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

Затем добавьте класс к любому узлу DOM, который требует усечения при переполнении: 

<div class="ellipsis">....
0 голосов
/ 04 июля 2011

это поддерживается во всех браузерах, кроме Firefox (я думаю). Elipsis производит ... при усеченном тексте и обрезает только текстовые клипы ...

тд { текст переполнение: многоточие; / * или переполнение текста: клип; * / }

...