Привести ширину элемента, когда перенос строки?

Question

Кажется, что это может быть тупиковый вопрос, но из-за того, что может быть какой-то способ сделать то, что я ищу, я решил спросить гениев в stackoverflow, прежде чем сдаться.
Подойдет любой тип решения (Javascript, CSS и т. Д.)!

То, что я хотел бы сделать, можно увидеть на этой странице: http://willdo.ca/test.php

Я заметил, что когда строка переносится в элемент с автоматической шириной (например, элементом inline-block) и с установленной на него максимальной шириной, пробел остается, заставляя элемент заполняться до максимальной ширины, даже если текст технически не достигает этой максимальной ширины (хотя я понимаю, почему он так себя ведет, так как технически это ширина элемента до принудительного переноса строки).

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

Вот ссылка для просмотра / загрузки HTML-кода, который я использовал при необходимости: http://willdo.ca/test.txt

Answer 1

Единственная причина, по которой текст переносится в первую очередь, заключается в том, что он касается края элемента, как определено значениями auto (родительская ширина) / px /% или максимальными / минимальными значениями ширины. Затем он выталкивает весь другой текст на следующую строку, сохраняя слова вместе (очевидно).

Единственный возможный способ сделать это - вычислить ширину фактического текста и соответствующим образом изменить размер окна в JS. Это невероятно сложно для такой проблемы и серьезного перегиба. Требуется рассчитать ширину каждого символа (не все одинаковые), и они зависят от DPI клиента, типа шрифта, масштабирования браузера, специальных возможностей и множества других вещей.

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