深入理解CSS中的空白符和换行 - 小火柴的蓝色理想-html教學-PHP中文網

首頁

web前端

html教學

深入理解CSS中的空白符和换行 - 小火柴的蓝色理想

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:42 AM

前面的话

　　CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说，是因为实际上空白符是包括换行的，且常用的文本不换行是使用的空白符的属性white-space: nowrap;但到底它们还有些什么属性值，以及有什么对应的用法。本文将就空白符和换行的内容做详细介绍和梳理

空白符

定义

　　空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格。

white-space

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

<span style="color: #000000;">normal: 合并空白符，允许自动换行
nowrap: 合并空白符，不允许自动换行
pre</span>-<span style="color: #000000;">line: 合并空白符(不包括换行符)，允许自动换行
pre: 不合并空白符，不允许自动换行
pre</span>-wrap: 不合并空白符，允许自动换行

　　[注意]

元素默认带有样式white-space: pre;
<p>　　[注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">They can stay 72-hours 
    within the Shandong      province after they have entered China via the Qingdao International Airport.</span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

文本换行

　　浏览器自身带有文本自动换行的功能，文本容器的右侧可以实现自动换行

　　对于英文来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行

　　对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号以及其前一个文字作为一个整体进行换行

　　所以实际上，white-space解决不了长单词或UTL地址的换行问题

word-wrap

　　word-wrap属性用来实现长单词或URL地址的自动换行

　　值: normal | break-word

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

word-<span style="color: #000000;">wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word</span>-wrap:<span style="color: #0000ff;">break</span>-word(截断单词换行，长单词从下一行开始)

　　[注意]当white-space的值是nowrap或pre时，word-break和word-wrap属性都失效

　　[注意]word-wrap在标准中被改为overflow-wrap，但由于兼容问题，一般还是使用word-wrap

word-break

　　CSS3使用word-break属性来决定自动换行的处理方法。通过具体的属性设置，不仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行。

　　值: normal | break-all | keep-all

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

<span style="color: #000000;">normal: 中文到边界上的汉字换行，英文从整个单词换行
</span><span style="color: #0000ff;">break</span>-<span style="color: #000000;">all: 对于英文长单词来说，会截断单词换行，长单词占据当前行剩余空间。但对于中文的处理，各浏览器不一致
    [</span><span style="color: #800080;">1</span><span style="color: #000000;">]firefox及safari: 中文到边界上的汉字换行，且允许标点置于段首
    [</span><span style="color: #800080;">2</span><span style="color: #000000;">]IE及chrome: 中文到边界上的汉字换行，但不允许标点置于段首
keep</span>-<span style="color: #000000;">all: 对于英文长文本不能换行，但对于中文的处理，各浏览器不一致
    [</span><span style="color: #800080;">1</span><span style="color: #000000;">]firefox: 在空白符处换行
    [</span><span style="color: #800080;">2</span><span style="color: #000000;">]IE及chrome: 在空白符及标点处换行
    [</span><span style="color: #800080;">3</span>]safari: 不支持

　　[注意]移动端目前基本都不支持keep-all值　　

　　[注意]当word-break值为break-all时，word-wrap属性失效；否则两个属性都起作用

表格

　　对于表单元格的长文本来说，使用word-wrap或word-break来强制换行需要设置table-layout:fixed

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，