Question

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

我该怎么做？因为，如果我尝试输出200个字符而没有间距的数据，我会得到以下结果：

result1（无间距）：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

result2（有一个空格）：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (space)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

我想成功：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

我是否需要使用以下内容？：

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

还是css样式？

Answer 1

应用word-break: break-all;只要文本超出父级的宽度，就会使文本换行，而不需要空格或其他类型的断点。

Answer 2

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

Is this what you want?

Answer 3

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

<div class="colors"></div>

谈论这些的
The W3 specification似乎表明了这一点 word-break：break-all用于要求CJK的特定行为（中文，日文和韩文）文本，而自动换行：break-word是更一般的，非CJK意识的行为。（信用卡：AakashM：see post）

分词属性选项（W3Schools）：

word-break:break-all;

工作示例：

Word-Break W3Schools

Answer 4

更新后的答案应为：

overflow-wrap:break-word;

这将打断一个单词，该单词本身无法适应自己的行，但保留所有其他单词不变（请参见溢出包装here）。

您还可以使用：

overflow-wrap:anywhere;，但这将允许在任何单词后换行，以减小元素的宽度。请参见下面与MDN所述的区别：

[break-word is]与anywhere值相同，如果行中没有其他可接受的断点，则通常在任意点处都可以破坏通常坚不可摧的单词，但是由单词break引入的软包装机会不是计算最小含量固有尺寸时要考虑的问题。

Internet Explorer，Safari和某些移动浏览器也不支持anywhere，而所有主要浏览器都支持break-word（请参见[here] [2]）。

word-break: break-word;不应再使用，因为不推荐使用{p> overflow-wrap:break-word;。现在，word-break属性旨在在您想打断单词时使用，无论它们是否适合自己的行（即，OP的第一个带有word-break: break-all的示例。

与分词相比，溢出包装只会在无法将整个单词放在自己的行中而不会溢出的情况下创建一个分词。

（通过溢出包装also linked above）

Answer 5

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

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

Answer 6

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

    .respose container:{
width:200
}

然后在html文件中添加

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

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

6 个答案: