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

Question

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

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

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

Например, предположим, что браузер был Firefox 3, а шрифт был 12px Arial. Какова будет ширина буквы & Quot; a & Quot; ширина буквы & Quot; b & Quot; и т. Д.?

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

  

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

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

Answer 4

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

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

table-layout: fixed;

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

Answer 5

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

Это работает немного быстрее, чем я ожидал. При этом предполагается, что содержимое ячеек является только текстовым - любое форматирование 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 6

Это практически невозможно сделать на стороне сервера. В дополнение к проблеме людей, у которых установлены разные шрифты, у вас также есть кернинг (буква & Quot; f & Quot; будет занимать различное количество места в зависимости от того, что рядом с ним) и параметры рендеринга шрифтов (можно ли указывать тип? " большие шрифты "?).

Answer 7

Вы ничего не можете сделать на стороне сервера, чтобы рассчитать это. Все, с чем вам нужно работать, это строка идентификации браузера, которая может точно или не точно сказать вам операционную систему и браузер пользователя. Вы также можете & Quot; ask & Quot; (через тег шрифта или CSS) для определенного шрифта, который будет использоваться для отображения текста, но нет никакой гарантии, что у пользователя установлен этот шрифт. Кроме того, пользователь мог иметь другую настройку DPI на уровне операционной системы, или мог сделать текст больше или меньше с помощью функции масштабирования браузера, или мог бы использовать свою собственную таблицу стилей в целом.

Answer 8

Вы можете поместить текст в невидимый промежуток и прочитать его, который охватывает ширину, но в основном это выглядит, как если бы кто-то пытался саботировать ваш сайт, и поэтому я бы рекомендовал запрещать посты со словами длиннее определенной длины, например, 30 символов без пробелы (позволяя ссылкам быть длиннее! -)

- но простой подход заключается в размещении блочного элемента внутри ячейки таблицы:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

Это эффективно прекратит загромождение стола! o]

Answer 9

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

Answer 10

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

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

Answer 11

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

Answer 12

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

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

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

Лучшая альтернатива - обрезать строковый сервер и предоставить простую подсказку javascript, которая может отображать более длинную версию. & Quot; развернуть & Quot; Также может помочь кнопка, которая может отображать результат в оверлейном элементе.

Answer 13

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

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