美文网首页程序员
关于网页中文字自动换行(div/pre)

关于网页中文字自动换行(div/pre)

作者: 天上月丶 | 来源:发表于2017-03-28 14:45 被阅读593次

在网页中,又是会用于显示一段文字,但预先并不知道,文字的长度及内容,此时,我们大多采用填充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 文档的其他部分中一样即可。

相关文章

  • 关于网页中文字自动换行(div/pre)

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

  • textarea:进行文本换行

    一、textarea进行文本换行 二、换行符在textarea、div、pre中的区别 关于换行符,网上有许多说法...

  • CSS--white-space

    取值说明: pre: 全保留,不自动换行 pre-wrap: 全保留,自动换行 nowr...

  • 格式处理

    white-space:normal|nowrap(不自动换行)|pre(换行、空格、tab保留住,不允许自动换行...

  • pre 自动换行

    pre 标签实现自动换行,在css添加如下属性:

  • pre 自动换行

    大前端知识库收集分享 www.rjxgc.com 壹玖零Tech搜罗各种前后端奇淫技巧,花式编程思想,日日更新,...

  • css中实现强制不换行/自动换行/强制换行

    1. 强制不换行 div{ white-space:nowrap; } 2. 自动换行 div{ word-w...

  • 技巧

    word-break: break-all; // 超出 div 强制换行white-space: pre-lin...

  • pre标签自动换行及去除前行前空格

    自动换行:pre {word-wrap: break-word;white-space: pre-wrap;}去除...

  • html

    :p标签的文本会在一个段落中自动换行。div标签内的文本也会在一个段落中自动换行。 :换行标签,使自动换行。文本格...

网友评论

    本文标题:关于网页中文字自动换行(div/pre)

    本文链接:https://www.haomeiwen.com/subject/rjpjottx.html