web開發(fā)中換行以及換行屬性的示例分析

小編給大家分享一下web開發(fā)中換行以及換行屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

關(guān)于換行以及換行屬性

對于CSS的white-space屬性，我想大部分人應(yīng)該和我差不多，最常用的就是nowrap屬性，最多用來做超長省略號顯示的時(shí)候會(huì)用到【hiahiahia~】

起因是這樣的：產(chǎn)品doggie策劃了一個(gè)元旦活動(dòng)，活動(dòng)主頁最下邊需要顯示配置的活動(dòng)規(guī)則，注意，是配置的活動(dòng)規(guī)則，所以，免不了運(yùn)營小妹要在后臺配置一個(gè)活動(dòng)規(guī)則，肯定不指望她們能配置html文本的呀，對吧，于是她們配置的是這樣的：

1、封墊蘇菲房間都是克拉夫；
    2、對方薩芬的刷分放大；
    3、粉打發(fā)打發(fā)打發(fā)

這樣色的，于是，取數(shù)據(jù)的時(shí)候，那隱藏的換行符免不了就被帶走了~走了~了，它就變成了一個(gè)真正的，換行符。就像word文檔里面看見的那樣

于是，頁面呈現(xiàn)與DOM結(jié)構(gòu)就變成了這樣

顯然，這不是我們真實(shí)想要它呈現(xiàn)的效果，我們當(dāng)然是想它能聰明的在該換行的時(shí)候換行呀，對吧，那么問題來了，為什么，它沒有換行呢？

換行符

阿望腦袋里能記下來的換行符一共有4種

1. \n：最初接觸\n，是學(xué)C語言換行的時(shí)候，釋義為：輸入完一行內(nèi)容后，光標(biāo)轉(zhuǎn)到下一行的起始位置

2. \r\n：回車換行（回車：回車就是把水平位置復(fù)位，換行：換行就是往下一行，不改變水平位置，可以想象一下，在word文檔中點(diǎn)擊鍵盤回車鍵，其實(shí)執(zhí)行的是回車+換行的操作）

3. <br />：這個(gè)換行符是HTML唯一能識別的換行標(biāo)簽

4. ?：word文檔軟回車標(biāo)記

當(dāng)然，除了這幾種，不同的語言可能會(huì)有它們自己的換行符，比如C++的endl，VB的空格+下劃線

百度百科顯示，word換行符是一種換行符號，它的作用是換行顯示，但是它不是真正的段落標(biāo)記，它的換行不是真正意義上的重起一段，因此被換行符分割的文字其實(shí)仍然還是一個(gè)段落中的，word中基于段落的所有操作都是不會(huì)識別換行符為段落結(jié)尾的，再加上在HTML中，只能識別br標(biāo)簽來做基本的文本換行，所以，這也就是文章開頭說的，為什么word軟回車換行符不能在HTML中正確回車顯示了。

HTML中的換行

在HTML中，換行可以有以下幾種辦法

塊級元素包裹

這個(gè)就不多做解釋了，塊級元素最基本的定義就是一般都從新行開始，相鄰的塊級元素將會(huì)在不同行顯示，默認(rèn)了它的換行行為

br 標(biāo)簽

br 是HTML中默認(rèn)的、唯一的可識別的換行元素，在要換行的地方加進(jìn)去就行，它是一個(gè)自閉合標(biāo)簽

pre 標(biāo)簽

來，解釋一下上面才說了br 是HTML中默認(rèn)的、唯一的可識別的換行元素，怎么突然有冒了個(gè)pre標(biāo)簽出來！

pre 元素可定義預(yù)格式化的文本，被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符，而文本也會(huì)呈現(xiàn)為等寬字體，所以，并不是因?yàn)樗蛔R別成了換行元素才導(dǎo)致?lián)Q行，而是因?yàn)椋Ａ袅宋谋竟?jié)點(diǎn)最原始的格式，你給我什么，我還你什么，而不是像其他的元素，你給我充滿換行符合空格的文本，我給你被我壓縮壓縮再壓縮的瘦身版文本

友情提示：它不僅可以保留換行格式，還可以保留你的多個(gè)空格噢，因?yàn)閜re元素默認(rèn)帶有樣式 white-space: pre;

舉個(gè)栗子

<pre>
        1、封墊蘇菲房間都     是克拉夫；
        2、對方薩芬的刷分放大；
        3、粉打發(fā)打發(fā)打發(fā)
    </pre>

    // 顯示
    1、封墊蘇菲房間都     是克拉夫；
    2、對方薩芬的刷分放大；
    3、粉打發(fā)打發(fā)打發(fā)

    <div>
        1、封墊蘇菲房間都     是克拉夫；
        2、對方薩芬的刷分放大；
        3、粉打發(fā)打發(fā)打發(fā)
    </div>

    // 顯示
    1、封墊蘇菲房間都 是克拉夫； 2、對方薩芬的刷分放大； 3、粉打發(fā)打發(fā)打發(fā)

鑒于對pre標(biāo)簽的無知，在阿望還在做JSP的時(shí)候，遇到這種換行的需求通常都是正則表達(dá)式將換行符轉(zhuǎn)換成br標(biāo)簽，然后通過HTML（vue的v-html）渲染成換行的DOM節(jié)點(diǎn)，相信也是大多數(shù)人的第一選擇

'我的字符串1\r\n\r\n\r\n\r\n我的字符串2\r\n111'.replace(/\r\n/g, '<br />')

現(xiàn)在想來，當(dāng)初那些前輩們教下來的也是這個(gè)辦法，估計(jì)，他們也沒想到，一行CSS代碼就能解決吧。。。

CSS屬性換行

我們假設(shè)有個(gè)超長的文本節(jié)點(diǎn)："哈哈哈，congratulations"，我們假設(shè)有個(gè)容器長度只能裝得下"哈哈哈，con"

word-break

word-break 屬性規(guī)定自動(dòng)換行的處理方法，可以讓瀏覽器實(shí)現(xiàn)在任意位置的換行，它是CSS3推出的新屬性（有兼容性問題），用來標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句

什么叫單詞內(nèi)的斷句呢？簡單點(diǎn)來說，就是當(dāng)文本節(jié)點(diǎn)"哈哈哈，congratulations"在容器中顯示成了"哈哈哈，con[假設(shè)這里換了行]gratulations"的時(shí)候，就產(chǎn)生了單詞內(nèi)斷句。瀏覽器默認(rèn)的時(shí)候，"哈哈哈，congratulations"在容器中會(huì)顯示成"哈哈哈，[假設(shè)這里換了行]congratulations"，即：如果有一個(gè)單詞很長，導(dǎo)致一行中剩下的空間已經(jīng)放不下它時(shí)，則瀏覽器會(huì)把這個(gè)單詞挪到下一行去

word-break一共有三個(gè)屬性值

normal 瀏覽器默認(rèn)的換行規(guī)則

"哈哈哈，congratulations"在容器中會(huì)顯示成"哈哈哈，[假設(shè)這里換了行]congratulations"

break-all 允許在單詞內(nèi)換行（單詞是指non-CJK (CJK 指中文/日文/韓文) 文本）

"哈哈哈，congratulations"在容器中會(huì)顯示成"哈哈哈，con[假設(shè)這里換了行]gratulations"

keep-all 只能在半角空格或連字符處換行

CJK 文本不斷行， Non-CJK 文本表現(xiàn)同 normal

word-wrap

word-wrap 屬性允許長單詞或 URL 地址換行到下一行

word-break一共有兩個(gè)屬性值

normal 只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）

break-word 在長單詞或 URL 地址內(nèi)部進(jìn)行換行

那么它與word-break的區(qū)別是什么呢？

首先看我們的前提條件：有個(gè)超長的文本節(jié)點(diǎn)："哈哈哈，congratulations"，我們假設(shè)有個(gè)容器長度只能裝得下"哈哈哈，con"，那么意味著，不添加word-break與word-wrap屬性的時(shí)候，該文本節(jié)點(diǎn)在容器內(nèi)顯示為"哈哈哈，[假設(shè)這里換了行]congratulations"，且單詞congratulations肯定是沖出了容器邊界的，超級難看。這個(gè)時(shí)候word-wrap就能派上用場了，給這段文字加上word-wrap: break-word之后，文本節(jié)點(diǎn)就會(huì)顯示成"哈哈哈，[假設(shè)這里換了行]congratula[假設(shè)這里換了行]tions"，這樣，為了防止長單詞溢出，就在它的內(nèi)部斷句了

那既然有word-wrap，又為什么要有word-break屬性呢？簡單來說，當(dāng)設(shè)置word-break:break-all; word-wrap:break-word，我們的超長文本"哈哈哈，congratulations"就會(huì)顯示成"哈哈哈，con[假設(shè)這里換了行]gratulatio[假設(shè)這里換了行]ns"，它的用處就是：節(jié)省空間！是的，你沒有看錯(cuò)！

word-wrap 是用來決定允不允許單詞內(nèi)斷句的，如果不允許的話長單詞就會(huì)溢出。最重要的一點(diǎn)是它還是會(huì)首先嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進(jìn)行單詞內(nèi)的斷句

word-break:break-all則更粗暴，直接進(jìn)行單詞內(nèi)的斷句

white-space

white-space 屬性設(shè)置如何處理元素內(nèi)的空白，這個(gè)屬性聲明建立布局過程中如何處理元素中的空白符，實(shí)際上會(huì)對列表溢出換行和文字溢出進(jìn)行處理

空白符

空白符是指在屏幕不會(huì)顯示出來的字符（如空格，制表符tab，回車換行等），HTML默認(rèn)已經(jīng)把所有空白符合并成一個(gè)空格

white-space一共有五個(gè)屬性值

normal 默認(rèn)，空白符會(huì)被瀏覽器忽略

多個(gè)空格合并成1個(gè)空格，換行符被忽略，在容器寬度內(nèi)自調(diào)整換行

pre 空白會(huì)被瀏覽器保留，其行為方式類似 HTML 中的 pre 標(biāo)簽

多個(gè)空格被保留，換行符被保留，不會(huì)在容器寬度內(nèi)自調(diào)整換行，直到遇到 br 標(biāo)簽為止

nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 br 標(biāo)簽為止

多個(gè)空格合并成1個(gè)空格，換行符被忽略，不會(huì)在容器寬度內(nèi)自調(diào)整換行，這是它與默認(rèn)行為不一樣的地方

pre-wrap 保留空白符序列，但是正常地進(jìn)行換行

多個(gè)空格被保留，換行符被保留，在容器寬度內(nèi)自調(diào)整換行

pre-line 合并空白符序列，但是保留換行符

多個(gè)空格合并成1個(gè)空格，換行符被保留，在容器寬度內(nèi)自調(diào)整換行

inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值

以上，可根據(jù)實(shí)際情況選擇自己想要的屬性值

另：若換行處想添加連字符，將congratulations換行顯示為con-gratulatio-ns的話，可使用屬性hyphens：auto;在適當(dāng)?shù)奈恢米詣?dòng)插入連字符換行

以上是“web開發(fā)中換行以及換行屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！