段落文字不会环绕到下一行

Question

I am trying to create text that will wrap around to the next line when it overflows. Currently when it overflows it creates an entirely new line and puts the text on that line. What I would like is for the text to fill the first line and then wrap around to a new line.

Code:

 <div> <p style="width: 15em; display: inline-block;">[100 bytes] Input Script:</p> <p style="display: inline-block; overflow-x: auto;"> <span style="overflow-x: auto;"> 034840082CFABE6D6DFF54D028353549F5600B28A1757828F1B0E9ECCC0322435BA6D8CA1D76442A6A08000000F09F909F00144D696E65642062792072656E6A69616E66656E670000000000000000000000000000000000000000000000000000000000 </span> </p> </div> 

I have also tried setting the text to the different word-wrap values with no avail. This has probably been answered millions of times, but I cannot find a solution which works in this situation.

Any help is appreciated, Thanks!

Answer 1

Set word-break: break-all; on your <p>

http://jsfiddle.net/rfo7ut2a/2/

Answer 2

You want the word-break property :

 span { word-break: break-all; } 

 <div> <p style="width: 15em; display: inline-block;">[100 bytes] Input Script:</p> <p style="display: inline-block; overflow-x: auto;"> <span style="overflow-x: auto;"> 034840082CFABE6D6DFF54D028353549F5600B28A1757828F1B0E9ECCC0322435BA6D8CA1D76442A6A08000000F09F909F00144D696E65642062792072656E6A69616E66656E670000000000000000000000000000000000000000000000000000000000 </span> </p> </div> 

Answer 3

Try the code below and see if it works for you.

 <div style=" display: -webkit-box;word-wrap:break-word;"> <p>[100 bytes] Input Script:</p> <p style=overflow-x: auto;"> <span style="overflow-x: auto;"> vdnbvhbsdh vbjsf dbvbdjfbsa ddddddddd ddKVZHSDBVkjsdvbJ HVBDHBSDHJV BSHDVBDHVSJBDJHm dsjzhvjhmdvjmhbsjfhvvlnbsfdhbzv skjhbvhjkzsbvhjzsdbvhb zvkhfnkhfnkjnfkbjndfkjbnkjnbzkjnbkjfdnbkjdnkjb </p> </div>