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

最新推荐文章于 2024-08-12 15:57:18 发布

祥哥的说

最新推荐文章于 2024-08-12 15:57:18 发布

阅读量2.2k

点赞数 2

分类专栏： CSS3 文章标签： word-break white-space pre word-wrap

本文链接：https://blog.csdn.net/qq_39207948/article/details/86497630

版权

CSS3 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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源代码，请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"。。一般将<pre>标签与<code>标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。
如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性。