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

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

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

table-layout: fixed;

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

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

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

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

На стороне сервера это сделать практически невозможно. Помимо проблемы, связанной с тем, что у людей установлены разные шрифты, у вас также есть кернинг (буква «f» будет занимать разное количество места в зависимости от того, что рядом с ней) и параметры рендеринга шрифта (включен ли cleartype? »Большие шрифты "?).

Вы можете поместить текст в невидимый промежуток и прочитать его ширину, но в основном это выглядит так, как будто кто-то пытается саботировать ваш сайт, и поэтому я бы рекомендовал запрещать сообщения со словами длиннее определенной длины, например, 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]

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

Внешний JS имеет модуль для этого

TextMetrics Provides precise pixel measurements for blocks of text so that you can determine exactly how high and wide, in pixels, a given block of text will be.

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

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

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

    }
  });

}

Если вас устраивает, что это не работает для FireFox, почему бы просто не использовать CSS? Исправьте таблицу с table-layout: fixed, укажите в соответствующем столбце overflow: hidden; text-overflow: ellipsis; белое пространство: nowrap.

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

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

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

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

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

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

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

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

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