Wrapping long text without white space inside of a div

后端 未结 4 1865
南旧
南旧 2021-01-01 09:09

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

827938828ey823876te37257e5t328er63

相关标签:
4条回答
  • 2021-01-01 09:40

    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;

    0 讨论(0)
  • 2021-01-01 09:51
    white-space: pre-wrap
    

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

    0 讨论(0)
  • 2021-01-01 10:03

    You can use the following

    p{word-break: break-all;}
    
            <p>LoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolor</p>
    
    0 讨论(0)
  • 2021-01-01 10:07

    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/

    0 讨论(0)
提交回复
热议问题