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

Question

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

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy 

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

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

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

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

Answer 1

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

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

Answer 2

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

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

table-layout: fixed; 

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 7

Ext JS имеет модуль, чтобы сделать только, что

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

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

Answer 8

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

Это работает немного быстрее, чем я ожидал. И он предполагает, что содержимое ячеек является только текстовым: любой 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 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. */ 
} 

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

Answer 13

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

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