Wrapping long text without white space inside of a div

Question

I am having issues with wrapping text. I am generating some hexencoding encryption and the output is too long like:

827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725

and it continues. When I put it inside a div, it won't wrap it even if I assign a specific width, because they are all together. I want it to continue from the next line if the div is not wide enough for one line.

How can I do that?

apperently stackoverflow.com is implementing what I need here. it continues from second line. when I look at this page's source code, I see the following for post-text: width: 660px; font-size: 107%; margin-bottom: 5px; margin-right: 5px; line-height: 130%; — tugberk, Feb 25 '11 at 17:13

adarshr · Accepted Answer · 2012-11-16T11:08:28.267

65

~~You can't wrap that text as it's unbroken without any spaces. You need a JavaScript or server side solution which splits the string after a few characters.~~

EDIT

You need to add this property in CSS.

word-wrap: break-word;

edited Nov 16 '12 at 11:08

answered Feb 25 '11 at 17:14

adarshr

59,379
22
134
163

score 18 · Answer 2 · edited Apr 18 '19 at 13:01

I have found something strange here about word-wrap only works with width property of CSS properly.

#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>

Here is a working demo that I have prepared about it. http://jsfiddle.net/Hss5g/2/

score 3 · Answer 3 · answered Oct 29 '20 at 17:22

3

white-space: pre-wrap

is what worked for me for <span> and <div>.

answered Oct 29 '20 at 17:22

Hemang

26,372
18
120
180

score 1 · Answer 4 · answered Apr 18 '19 at 12:56

You can use the following

p{word-break: break-all;}

        <p>LoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolor</p>

Wrapping long text without white space inside of a div

4 Answers4

Linked

Related