Последний символ текста HTML CSS открывает новую строку

#android #html #css #ionic-framework

#Android #HTML #css #ionic-framework

Вопрос:

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

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

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

Я смог сузить проблему и создать это перо

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

1. Divs ведут себя так естественно. Удаление word-break: break-word; фактически исправило его в вашем pen. Я не пробовал использовать другие шрифты.

2. Да, это исправило бы это, но я должен иметь word-break: break-word; , поскольку пользователь может ввести действительно длинное слово, и в этом случае слово не будет видно. Помните, что он запускается в веб-браузере внутри смартфона, поэтому ширина небольшая

3. Итак, текст, который находится внутри div, на самом деле является пользовательским вводом? Вы должны добавить это к вопросу. Вам, скорее всего, придется пойти на компромисс между разрешением пользователю прокручивать по горизонтали, разрывая слово и используя width: 100% или элемент, используемый для вывода текста.

Ответ №1:

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

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

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

Ответ №2:

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

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