HTML последний текст CSS начинает новую строку

Question

У меня проблема с тем, что мне нужно, чтобы div рос в соответствии с текстом внутри него.Текст вводится пользователем, поэтому он динамический и может содержать новые строки.Итак, подведем итог:

• В div не должно быть width:100%
• Текст должен быть завернут в случае очень длинного слова
• Текстможет содержать новые строки

Простые white-space: pre-wrap; и word-break: break-word; сделали свое дело в большинстве случаев, но проблема в том, что с некоторыми шрифтами (я использую ионные, поэтому Android использует 'Noto Sans Hebrew') последний символ начинает новую строку.

Мне удалось сузить задачу и создать эту ручку

Я думаю, это может быть неожиданная ширина некоторых символовКто-нибудь может придумать исправление или обходной путь?

Answer 1

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

Изменение шрифта на OpenSans Hebrew (который выглядит одинаково) решило эту проблему для меня

Answer 2

Для этой конкретной ручки, которую вы предоставили, удалив либо white-space: pre-wrap; или word-break: break-word; исправляет проблему, поскольку каждый из них отменяет влияние друг друга. Тем не менее, я рекомендую удалить ваш white-space: pre-wrap.

Сохранение white-space: pre-wrap будет таким, как если бы мы говорили «сохраняйте все как в white-space: normal, но сохраняйте пробельные символы буквально из HTML» Согласно спецификации MDN :

Последовательности пробелов сохраняются. Строки разбиваются на символах новой строки, на тегах "br" и, при необходимости, заполняют блоки строк.