在div - css中包装文本

时间:2021-10-29 22:21:13

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

我有包装问题。我正在生成一些六编码加密,输出太长了;

827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725

827938828 ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725

and it continues. When I put it inside a div, it wont 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 enough for one line.

它仍在继续。当我将它放入div中时,它不会包装它,即使我指定了一个特定的宽度,因为它们都在一起。如果div对于一行来说不够的话,我希望它从下一行继续。

how can I do that?

我怎么做呢?

2 个解决方案

#1


53  

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.

你不能把那个文本包装起来,因为它没有任何空格。您需要一个JavaScript或服务器端解决方案,它在几个字符后分割字符串。

EDIT

编辑

You need to add this property in CSS.

您需要在CSS中添加此属性。

word-wrap: break-word;

自动换行:break-word;

#2


15  

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

我在这里发现了一些奇怪的东西,文字包装只适用于css的宽度属性。

HTML:

HTML:

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

CSS:

CSS:

#ONLYwidth{
   width:200px;
}

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

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

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

这是我准备好的一个工作演示。http://jsfiddle.net/Hss5g/2/

I know its too late but it could help others!

我知道为时已晚,但它可以帮助别人!

#1


53  

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.

你不能把那个文本包装起来,因为它没有任何空格。您需要一个JavaScript或服务器端解决方案,它在几个字符后分割字符串。

EDIT

编辑

You need to add this property in CSS.

您需要在CSS中添加此属性。

word-wrap: break-word;

自动换行:break-word;

#2


15  

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

我在这里发现了一些奇怪的东西,文字包装只适用于css的宽度属性。

HTML:

HTML:

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

CSS:

CSS:

#ONLYwidth{
   width:200px;
}

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

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

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

这是我准备好的一个工作演示。http://jsfiddle.net/Hss5g/2/

I know its too late but it could help others!

我知道为时已晚,但它可以帮助别人!