CSS还是什么?强制将文本拆分为多行

时间:2021-11-15 15:00:29

Forcing the text split into multiple lines when it reaches the maximum width of the '#div'.

当文本达到'#div'的最大宽度时,强制将文本拆分为多行。

How can I do this? because, if I try to output data with 200 characters without spacing, I get the following:

我怎样才能做到这一点?因为,如果我尝试输出200个字符而没有间距的数据,我会得到以下结果:

result1(no spacing):

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

result2(have one space):

result2(有一个空格):

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (space)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

I want to make it:

我想做到:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

Do I need to use the following?:

我需要使用以下内容吗?:

 result+=str.substring(0,200)  "\n";

or it is a css styling?

或者它是一个CSS造型?

3 个解决方案

#1


33  

Applying word-break: break-all; will make the text wrap at whatever character whenever it exceeds it's parent's width, without the need of a space or other type breakpoint.

应用分词:break-all;当文本超出父元素的宽度时,将使文本换行为任何字符,而不需要空格或其他类型的断点。

#2


4  

make a smaller div and use CSS text-align: justify and word-break:break-all;

制作一个较小的div并使用CSS text-align:justify和word-break:break-all;

Is this what you want?

这是你想要的吗?

#3


3  

As already stated in the accepted answer use the following:

如已接受的答案中所述,请使用以下内容:

word-break:break-all;

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour. (credit: AakashM: see post)

谈论这些的W3规范似乎暗示了断字:break-all用于要求CJK(中文,日文和韩文)文本的特定行为,而自动换行:break-word是更通用的,非-CJK意识到的行为。 (信用:AakashM:见帖子)

Word-Break Property options (W3Schools):

分词属性选项(W3Schools):

normal      Default value. Break words according to their usual rules

break-all   Lines may break between any two letters

keep-all    Breaks are prohibited between pairs of letters

initial     Sets this property to its default value. Read about initial

inherit     Inherits this property from its parent element. Read about

Working Example:

Word-Break W3Schools

#1


33  

Applying word-break: break-all; will make the text wrap at whatever character whenever it exceeds it's parent's width, without the need of a space or other type breakpoint.

应用分词:break-all;当文本超出父元素的宽度时,将使文本换行为任何字符,而不需要空格或其他类型的断点。

#2


4  

make a smaller div and use CSS text-align: justify and word-break:break-all;

制作一个较小的div并使用CSS text-align:justify和word-break:break-all;

Is this what you want?

这是你想要的吗?

#3


3  

As already stated in the accepted answer use the following:

如已接受的答案中所述,请使用以下内容:

word-break:break-all;

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour. (credit: AakashM: see post)

谈论这些的W3规范似乎暗示了断字:break-all用于要求CJK(中文,日文和韩文)文本的特定行为,而自动换行:break-word是更通用的,非-CJK意识到的行为。 (信用:AakashM:见帖子)

Word-Break Property options (W3Schools):

分词属性选项(W3Schools):

normal      Default value. Break words according to their usual rules

break-all   Lines may break between any two letters

keep-all    Breaks are prohibited between pairs of letters

initial     Sets this property to its default value. Read about initial

inherit     Inherits this property from its parent element. Read about

Working Example:

Word-Break W3Schools