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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:57:12  来源:igfitidea点击:

Wrapping long text without white space inside of a div

htmlcss

提问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 divis 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-wraponly works with widthproperty of CSS properly.

我在这里发现了一些奇怪的东西,word-wrap只适用于widthCSS 的属性。

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