网页中的文字怎么设定主动换行

这次给大家带来网页中的文字如何设定主动换行，网页中的文字设定主动换行留意事项是什么，下面就是实战案例，一起来看一下。

在网页中，又是会用于显示一段文字，但预先并不知道，文字的长度及内容，此时，我们大多采纳填充div或pre的方式来显示文字。

使用div元素时，肯定了宽度加上以下两个属性，即可包管填充在div中的文字主动换行。

word-wrap: break-word;   //word-wrap 属性同意长单词或 URL 地址换行到下一行。//break-word在长单词或 URL 地址内部停止换行。word-break: break-all;//word-break 属性规定主动换行的处置办法。

使用pre元素时，相似的，也加上以下两个属性，其内文字即可主动换行。

white-space: pre-wrap;    //pre-wrap保存空白符序列，但是正常地停止换行。word-break: break-all;
word-wrap: break-word;

div我们大家都熟知，可以填充文字或其它元素，但文字放在div中时，往往不克不及保持原有格局，比方空格,回车等。

pre 元素可定义预格局化的文本。被包抄在 pre 元素中的文本平常会保存空格和换行符。而文本也会显现为等宽字体。

pre 标签的一个常见利用就是用来表示运算机的源代码。

可以致使段落断开的标签（例如标题、p 和 address 标签）绝不克不及包括在 pre 所定义的块里。尽管有些阅读器会把段落完毕标签说明为简便地换行，但是这种行动在所有阅读器上并不都是一样的。

pre 元素中同意的文本可以包罗物理样式和基于内容的样式转变，还有链接、图像和水平分隔线。当把其他标签（比方 a 标签）放到 pre 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！

引荐阅读：

React怎样给button增加事件

如何使用select猎取选中的值

React中给div设定html

以上就是网页中的文字如何设定主动换行的具体内容，更多请关注百分百源码网其它相关文章！