Html CSS还是什么?强制将文本分成多行

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18307668/
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 12:18:08  来源:igfitidea点击:

CSS or what? Forcing the text split into multiple lines

csshtmlstyling

提问by John Bobs

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 个字符而没有空格的数据,我会得到以下信息:

Result 1(no spacing):

结果 1(无间距):

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...


Result 2(have one space):

结果 2(有一个空格):

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (space)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...


Expected result:

预期结果

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...


Do I need to use the following?

我需要使用以下内容吗?

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

or it is a CSS styling?

或者它是一个 CSS 样式?

回答by K. V. Suresh

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.

应用word-break: break-all;将使文本在超过其父级宽度的任何字符处换行,而无需空格或其他类型的断点。

回答by Dan Beaulieu

As already stated in the accepted answer use the following:

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

word-break:break-all;

The W3 specificationthat 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 规范似乎表明 word-break: break-all 用于要求对 CJK(中文、日语和韩语)文本进行特定行为,而 word-wrap: 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

断字 W3Schools

回答by Mohammad Masoudian

make a smaller div and use CSStext-align: justifyand word-break:break-all;

制作一个较小的 div 并使用CSStext-align: justifyword-break:break-all;

Is this what you want?

这是你想要的吗?

回答by Shreyash Shetty

The word-breakproperty can be used to control the text flow. The following value would fix your issue: word-break: break-all

word-break属性可用于控制文本流。以下值将解决您的问题: word-break: break-all

More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

更多信息可以在这里找到:https: //developer.mozilla.org/en-US/docs/Web/CSS/word-break

回答by Shreyash Shetty

use div and set the width of a div In CSS File

使用 div 并在 CSS 文件中设置 div 的宽度

    .respose container:{
width:200
}

And then in the html file add

然后在html文件中添加

<p div="response container">
if(string.length>limit)
{`return string.substring(0,limit)+'...';`
}
else
{`return string;`
}
</p>