Html 在 div 内包装没有空格的长文本
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5120313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrapping long text without white space inside of a div
提问by tugberk
I am having issues with wrapping text. I am generating some hexencoding encryption and the output is too long like:
我在换行时遇到问题。我正在生成一些十六进制编码加密,输出太长,例如:
827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r4e56r326r5632r65sr32dr32udr56r634r57rd63725
827938828ey823876te37257e5t328er6367r5erd663275e65r532r6s3624e5645376er563rdr753624e544341763r567r266r3r5r3r5r3r5r3r5r3r5r3r5r3
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.
它继续。当我将它放在 a 中时div
,即使我指定了特定的宽度,它也不会包装它,因为它们都在一起。如果一行div
不够宽,我希望它从下一行继续。
How can I do that?
我怎样才能做到这一点?
回答by adarshr
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;
word-wrap: break-word;
回答by immayankmodi
I have found something strange here about word-wrap
only works with width
property of CSS properly.
我在这里发现了一些奇怪的东西,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>
Here is a working demo that I have prepared about it. http://jsfiddle.net/Hss5g/2/
这是我准备的一个工作演示。http://jsfiddle.net/Hss5g/2/
回答by Navneet Kumar
You can use the following
您可以使用以下
p{word-break: break-all;}
<p>LoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolorLoremipsumdolor</p>