На моем веб-сайте пользовательское имя пользователя всегда отображается вверху каждой страницы (наряду с названием сайта, другими ссылками на страницы и т. Д.) В размере шрифта «3»,
Мне потребовалось очень много времени, чтобы понять это, но в конце концов мне пришло в голову, что пользователи с действительно длинными именами пользователей столкнулись с интервалом в верхней части каждой страницы, и весь текст нажимается на строку, делая вся вещь выглядит уродливой как грех (она видна только отдельному пользователю, так как это их имя пользователя, но я не хочу, чтобы кто-то из моих пользователей вообще это видел).
Я не спрашиваю, как найти количество символов в их имени – то, что я хочу знать, – это то, как я могу определить физический объем пространства, которое их имя займет, а в случае, если оно будет слишком длинным, уменьшите размер шрифта до 2 или даже 1, если необходимо.
Причина, по которой простой strlen () не срабатывает из-за потенциальных различий в пространстве («Трагический Дионис» занимает меньше места, чем «HERSHEYFEVER», несмотря на то, что у первого в нем больше персонажей).
Широкий поиск Google постоянно оставляет меня с большим количеством методов подсчета символов, поэтому я остался невежественным.
Вы не можете использовать PHP для этого – потому что многое зависит от стиля интерфейса (семейства шрифтов, размер шрифта, стиль шрифта и т. Д.). Вы можете использовать jQuery для определения длины элемента и при необходимости применить определенные функции:
HTML
<span id="box"><?=$yourString?></span> JQuery
$(function() { var box = $('#box'); if (box.width() >= 50) { box.addClass('massiveLength'); } });
Или, если вы хотите применить что-то ко всем элементам, вот вам пример jsFiddle .
На самом деле это невозможно сделать на сервере.
Вместо этого используйте Javascript для получения фактической ширины элемента, а затем уменьшите его размер шрифта.
Я просто выброшу это, но если вы закроете блок имени пользователя в элементе и дадите ему максимальную ширину, он может решить вашу проблему.
<span style="max-width: 50px; overflow: hidden;">The Username Goes Here</span>