word-break断行规则、white-space空白处理、pre预格式化处理、word-wrap长单词及URL换行

版权声明: https://blog.csdn.net/qq_39207948/article/details/86497630

1、word-break属性指定非CJK脚本的断行规则。

提示:CJK脚本是中国,日本和韩国("中日韩")脚本。

word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

2、 white-space属性指定元素内的空白怎样处理。

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 实例:

<body>
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
</body>

(1) white-space:normal;默认。空白会被浏览器忽略。

(2)white-space:normal;文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

( 3 ) white-space:pre;空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

3、<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。

注意点:

  • pre元素是块级元素,但是只能包含文本或行内元素。也就是说,任何块级元素(常见为可以导致段落断开的标签)都不能位于pre元素中。
  • pre元素中允许的文本可以包含物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签,比如<a>标签放到<pre>块中时,就像放在HTML/XHTML文档的其他部分中一样即可。
  • 制表符tab在<pre>标签定义的块当中可以起到应有的作用,每个制表符占据8个字符的位置,但并不推荐使用tab,因为在不同的浏览器中,tab的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
  • 如果希望使用<pre>标签来定义计算机源代码,比如HTML源代码,请使用符号实体来表示特殊字符,比如 "&lt;" 代表 "<","&gt;" 代表 ">"。。一般将<pre>标签与<code>标签结合起来使用,以获得更加精确的语义,用于标记页面中需要呈现的源代码。
  • 如果想要把某一段规定好的文本格式放在HTML中,那么就要利用pre元素的特性。

4、word-wrap 属性允许长单词或 URL 地址换行到下一行。

normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

实例:

 

 

猜你喜欢

转载自blog.csdn.net/qq_39207948/article/details/86497630