Визуализированные данные ширины пикселя для каждого символа в шрифте браузера

Question

У меня есть столбец таблицы, который должен быть ограничен определенной шириной, скажем, 100 пикселей. Иногда текст в этом столбце шире, чем этот, и не содержит пробелов. Например:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

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

Например, предполагая, что браузер был Firefox 3, а шрифт был 12px Arial. Какова будет ширина буквы «а», ширина буквы «б» и т. Д .?

У вас есть данные, показывающие ширину пикселя каждого символа? Или программа для его генерации?

Я думаю, что умный одноразовый сценарий javascript мог бы добиться цели. Но я не хочу тратить время на то, чтобы заново изобретать колесо, если это уже сделал кто-то другой. Я, конечно, не первый, кто сталкивается с этой проблемой.

Answer 1

Как насчет переполнения: прокрутка?

Answer 2

Ext JS имеет модуль для этого

TextMetrics Обеспечивает точные измерения пикселей для блоков текста, так что вы можете точно определить, насколько высоко и широко, в пикселях, данный блок текста будет быть.

Я уверен, что есть и другие доступные библиотеки, которые тоже это делают.

Answer 3

Это не только невозможно сделать на стороне сервера, это также не имеет смысла. Вы не знаете, какой браузер будет использовать ваш клиент, и вы не знаете, какие настройки шрифтов на стороне клиента будут переопределять любую информацию о стилях, которую вы назначаете для фрагмента HTML. Вы можете подумать, что вы используете абсолютные пиксели позиционирования в своих свойствах стиля, но клиент может просто игнорировать их или использовать какой-нибудь плагин для масштабирования всего, потому что клиент использует экран с высоким разрешением.

Использование фиксированной ширины, как правило, плохая идея.

Answer 4

Вот мое клиентское решение, которое я придумал. Это довольно специфично для моего приложения, но я делюсь им здесь на случай, если кто-то еще столкнется с той же проблемой.

Это работает немного быстрее, чем я ожидал. И это предполагает, что содержимое ячеек только текстовое - любое форматирование HTML будет удалено в процессе сокращения.

Требуется jQuery.

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

Answer 5

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

Попробуйте вместо этого:

table-layout: fixed;

Это гарантирует, что таблица никогда не будет больше указанного вами размера.

Answer 6

То, что вы хотите, это тег . Это специальный HTML-тег, который сообщает браузеру, что здесь допустимо использовать слово, если требуется перенос. Я не стал бы вставлять текст в постоянное хранилище, потому что тогда вы связываете свои данные с тем, где и как вы будете их отображать. Однако вполне приемлемо внедрить теги на стороне сервера в код, ориентированный на просмотр (например, с тегом JSP или, возможно, в контроллере). Вот как бы я это сделал. Просто используйте регулярное выражение, чтобы найти слова, длина которых превышает X символов, и вставляйте этот тег через каждые X символов в такие слова.

Обновление: я немного осмотрелся и похоже, что wbr поддерживается не во всех браузерах. В частности, IE8. Я сам не проверял это. Возможно, вы могли бы использовать переполнение: скрытый в качестве резервной копии или что-то в этом роде.

Answer 7

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

Быстрое исправление на стороне клиента состояло бы в стилизации ваших ячеек с атрибутом переполнения:

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

Лучшей альтернативой является усечение вашей строки на стороне сервера и предоставление простой подсказки javascript, которая может отображать более длинную версию. Также может помочь кнопка «развернуть», которая может отображать результат в оверлейном диве.

Answer 8

У некоторых пользователей настройки шрифта по умолчанию больше или меньше. Вы не можете сделать это на сервере. Вы можете измерить его только после того, как браузер отобразит страницу.

Answer 9

http://www.css3.info/preview/text-overflow/

Это новая функция css3.

Answer 10

Если вы согласны с тем, что это не работает для FireFox, почему бы просто не использовать CSS? У таблицы с макетом таблицы: исправлено, у рассматриваемого столбца переполнение: скрыто, переполнение текста: многоточие; бело-пространство: Nowrap

.