Блог

Главная - Вопросы по программированию - вырезать текст в таблице с помощью PHP или jQuery /html / css

вырезать текст в таблице с помощью PHP или jQuery /html / css

#php #javascript #jquery #html #css

#php #javascript #jquery #HTML #css

Вопрос:

 <table id="tab">
    <tr><td>....</td><td>2222</td></tr>
    <tr><td>@@@@</td><td>4444</td></tr>
</table>

#tab td {
   border: solid 1px red;
   max-width: 50px;
}

ЖИВОЙ ПРИМЕР: http://jsfiddle.net/mCxqD

я бы хотел вырезать текст в TD, если он слишком длинный. Я могу использовать strlen и substr, но:

strlen(….) = 4; strlen(@@@@) = 4;

и в таблице занимают разное количество места.

Каков наилучший способ для этого? У меня нет переноса на новую строку. Я хотел бы кое-что:http://jsfiddle.net/mCxqD/1

редактировать: переполнение: скрытый — это хорошо, но что, если я хотел бы добавить для текста переполнения, например «*»? http://jsfiddle.net/7ksD7/2

Ответ №1:

Добавить overflow: hidden .

Демо:http://jsfiddle.net/7ksD7

Комментарии:

1. 1, спасибо, но что, если я хотел бы добавить для текста переполнения, например, «8»?

2. Я не уверен, что вы имеете в виду. Не могли бы вы привести пример?

3. Как ответил @VinayC, text-overflow: ellipsis добавит ... к обрезанному тексту. Однако в Firefox более ранних версий, чем 7, это не работает. Я не думаю, что есть способ CSS отображать другие символы, кроме многоточия.

4. переполнение скрывает текст только после ограничения ширины, должно появиться количество символов, которые наилучшим образом вписываются в ограничение.

Ответ №2:

Это небольшой обход (и с использованием jQuery… хотя вы могли бы сделать это с помощью обычного JS достаточно легко), но вы могли бы попробовать использовать JS, чтобы обернуть текст в тег span и измерить его при сравнении с максимальной шириной. Возможно, вам потребуется настроить несколько вещей (например, убедитесь, что вы компенсируете ширину символа, используемого для обозначения ограничения), но я думаю, что это должно сработать (если у вас нет текстового переполнения):

 $(document).ready(function() {
    $('td').each(function() {
        var contents = $(this).html();
        var max_width = $(this).css('max-width').replace('px', '');
        var cut_char = '*';

        $(this).html('');
        $(this).append('<span>'   contents   '</span>');
        var $span = $(this).find('span:first');

        var content_width = $span.innerWidth();

        while (content_width > max_width) {
            var str = $span.html();
            $span.html(str.substring(0, str.length - 1));

            content_width = $span.innerWidth();

            if (content_width < max_width) {
                $span.html(str.substring(0, str.length - 2)   cut_char);
            }
        }
    });
});

Вот ваша скрипка обновлена:
http://jsfiddle.net/mCxqD/6

Ответ №3:

Я думаю, что лучшим выбором будет свойство text-overflow — 

 #tab td {
   border: solid 1px red;
   max-width: 50px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow: ellipsis;
}

смотрите http://jsfiddle.net/7ksD7/5

Смотрите больше здесь о том же самом — хотя в этой статье говорится, что свойство не поддерживается в FF, по крайней мере, мой браузер (FF 7), похоже, поддерживает его.