Обтекание длинного текста без пробелов внутри div

У меня проблемы с переносом текста. Я генерирую некоторое кодирование в шестнадцатеричном коде, и вывод слишком длинный, как:

827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725

и это продолжается. Когда я помещаю его в элемент div, он не будет переноситься, даже если я назначу определенную ширину, потому что они все вместе. Я хочу продолжить со следующей строки, если div недостаточно широк для одной строки.

Как я могу это сделать?

Ответы

Ответ 1

Вы не можете обернуть этот текст, поскольку он не разбит без пробелов. Вам нужно решение для JavaScript или сервера, которое разбивает строку после нескольких символов.

ИЗМЕНИТЬ

Вам нужно добавить это свойство в CSS.

word-wrap: break-word;

Ответ 2

Я нашел здесь что-то странное, что word-wrap по словам корректно работает только со свойством width в CSS.

#ONLYwidth {
  width: 200px;
}

#wordwrapWITHOUTWidth {
  word-wrap: break-word;
}

#wordwrapWITHWidth {
  width: 200px;
  word-wrap: break-word;
}

<b>This is the example of word-wrap only using width property</b>
<p id="ONLYwidth">827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725</p>
<br/>
<b>This is the example of word-wrap without width property</b>
<p id="wordwrapWITHOUTWidth">827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725</p>
<br/>
<b>This is the example of word-wrap with width property</b>
<p id="wordwrapWITHWidth">827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725</p>

Ответ 3

Вы можете использовать следующее

p{word-break: break-all;}

        <p>LoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolor</p>