Автоматически уменьшать размер шрифта для длинных слов

Я работаю над сайтом электронной коммерции, в котором должности и названия продуктов должны отображаться в довольно узких div. Я хотел бы установить определенный размер шрифта для слов, которые могут естественным образом вписаться в предоставленное пространство, при этом инструктируя слова, которые слишком велики для того, чтобы ширина родительского объекта автоматически уменьшалась, что позволяет избежать переноса переносов. Кажется, кто-то должен был подумать о том, как это сделать раньше, но я не смог найти какие-либо решения в Интернете. Ближайшим, который я нашел для ответа, является плагин BigText jQuery , но это действительно предназначено для ситуаций, когда вы можете предсказать свои собственные разрывы строк. Поскольку мои заголовки будут запрошены WordPress и полностью вставлены в div, этот плагин сократит мои тексты, пока каждое слово не поместится на одну строку, что не то, что я ищу. Пожалуйста, дайте мне знать, если у вас есть предложения. Большое спасибо за ваше время! Лучший, Джонатан

Я сделал что-то подобное, используя простой подход добавления класса CSS к заголовкам на основе их количества символов. Затем этот класс CSS уменьшает letter-spacing и / или font-size .

 // Count the characters, taking Unicode into account $chars = mb_strlen($post->post_title); // For every 10 characters after the first 20, add a size $size = max(0, ceil(($chars - 20) / 10)); // Generate the CSS class: x-long, xx-long, etc. $class = ($size) ? str_repeat('x', $size).'-long' : ''; // Output echo '<h1 class="'.$class.'">'.esc_html($post->post_title).'</h1>'; 

Однако этот подход является наивным. Он не учитывает фактическую ширину символов, отображаемую шрифтом. Для этого вам нужен подход JavaScript.