isplay的屬性值inline-block是讓元素在一行顯示，html元素默認上下排列的，所以中間有換行符，于是并排顯示就有了換行符帶來的空隙。這些空隙在大多數網頁布局中并不合適，那么如何解決呢？

方案一：將html標簽要display:inline-block 的元素寫在一行。缺點：代碼可讀性差。

方案二：給父元素設置font-size:0,缺點是子元素如果里面有文字，文字會消失不見，所以又要給子元素設置font-size:0,增加了代碼量。

方案三：給元素設置float:left,缺點高度塌陷，要清楚浮動。

方案四：設置子元素的margin-left為負值，但是元素之間的間隙大小是根據上下文的字體大小確定的，而每個瀏覽器的換行空隙大小不同，如果font-szie：16px,chrome空隙為8px,火狐空隙為4px.所以這個方法不通用。

方案五：設置父元素 display:table;word-spacing:-1em;目前這個方法可以完美解決，且兼容其他瀏覽器。

使用Vue開發(fā)前端頁面的時候，難免會遇到接收的字符串過長，需要讓字符串換行。以往在HTML頁面開發(fā)中，常用的方法是word-wrap：break-word；添加上這行代碼后，在塊元素定義的寬度不夠時輸出的文本內容就會換行。但是在vue中使用word-wrap屬性就不起作用，網上查找資料說使用white-space：pre-line;就可以實現換行。本文就簡單介紹下white-space的使用。

因為我沒有系統(tǒng)的學過前端，就是遇到一點問題學習一點前端知識。當我在這次實現換行效果的過程中就學習使用了white-space的用法。

首先按照網上的資料，直接添加white-space：pre-line; 是實現了換行，但是換行卻是從第二行中間開始的。具體效果大概如下圖：

為什嗎會有這個效果呢？第一反應是有空格產生了，哪里來的空格呢？那就是接收的后端傳遞的字符串中有空格，于是就想辦法去處理接收的變量，嘗試了以下兩種方法：

（1）添加一層盒子嵌套，父盒子font-size：0，子盒子font-size：12px；

.tabBox_tit {
  border: 1px solid red;
  width: 175px;
  height: 50px;
  white-space: pre-line;
  font-size: 0;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.tabBox_tit span {
  font-size: 16px; /* 根據需求設置具體的字體大小 */
}

/*說明如下：

將 white-space 屬性的值從 pre-wrap 修改為 pre-line，這樣文本可以從第一行第一個字符輸出并且可以自動換行。
將 font-size 屬性的值設為 0，以去除在HTML中的空格（空格、回車等），避免產生不必要的空隙。
將 .tabBox_tit 框架內的文字大小設為 0 ，因為前面已經有了一個全局修改，
并通過 .tabBox_tit span 選擇器來單獨指定文字的大小，這樣可以避免子元素繼承父元素的字體大小。
*/
復制代碼

（2）使用flex布局讓內容居中

.tabBox_tit {
  border: 1px solid red;
  width: 175px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 16px; /* 根據需求設置具體的字體大小 */
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
/*
說明如下：
將 white-space 屬性去掉，因為使用 flex 屬性后不需要再用這個屬性來控制文本輸出。
添加 display: flex 屬性，并設置 flex-direction: column，這樣會將容器中的元素按列排列。
添加 justify-content: center 和 align-items: flex-start 屬性，這樣可以使文字垂直居中并從左側對齊。
*/
復制代碼

經過以上兩種方式的設置，文本輸出樣式還是和上面的截圖一樣，從第二行中間開始輸出。這樣嘗試的時候，沒有實現效果，導致我懷疑自己flex布局的知識點沒有學好，又去重新溫習了一遍flex布局的文檔。改來改去一個小時就過去了。內心有點失敗的挫折感。這個時候，是不是就說明換行符號不是從變量里面?zhèn)鬟f過來的呢？

于是，再去查看代碼，發(fā)現了代碼被編輯器格式話之后換行了，在網上查找資料也終于瞅到有人說到這一點了。于是嘗試了修改VUE的模板代碼，代碼如下：

   <!--修改后-->
              <span class="tabBox_tit line1">
                <span class="font-color-red" v-if="val.cart_info.is_gift">贈品</span>{{ val.cart_info.productInfo.store_name + ' | ' }}{{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
              </span>
              <!--修改前 -->
              <span class="tabBox_tit line1">
                <span class="font-color-red" v-if="val.cart_info.is_gift">贈品</span>
                {{ val.cart_info.productInfo.store_name + ' | ' }}
                {{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
              </span>
復制代碼

讓后，讓后我想要的功能就實現了。到這里不得不感慨前端的水真的很深，原來代碼格式化也并不是所有的代碼都可以使用的。

基于以上的折騰分析，總結一下，Vue實現輸出文本自動換行的效果：要做到以下兩點：1.HTML代碼塊不能格式化換行，2.使用white-space：pre-line; 這樣就可以了。

正常情況下到這里都應該寫完了。但是我又有點強迫癥，總覺得不能格式化的代碼不好看，或者以后不小心格式化了，文本輸出這里又出現問題豈不是很不美。于是去查下white-space這個屬性的定義，通過菜鳥教程學習到了更好的解決方法，附菜鳥截圖:

根據教程，知道了想實現換行效果又可以格式化代碼使用：white-space：normal；就可以了。

以上就是前端white-space屬性學習的痛苦經過。希望能幫助到你

作者：沐道PHP
鏈接：https://juejin.cn/post/7221341862116540471
來源：稀土掘金
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。

本文簡介

• 面試大廠,HTML/CSS,JS,網絡基礎這三塊硬知識是必不可少的
• 我整理了一些備考筆記，分享給大家
• 初中級前端到高級前端的蛻變，從基礎知識開始~

2 塊元素和行元素

2.1 請說出3個H5新增的塊元素，并介紹他們的應用場景

• aside:表示article元素內容之外，與article元素內容相關的輔助信息
• figure:代表一個塊級圖像，包含說明。figure添加標題時，與figcaption元素結合使用。
• dialog:表示幾個人直接的對話。與dt和dd元素結合使用，dt表示講話者，dd表示講話內容。

2.2 行內元素和塊元素的區(qū)別

• HTML元素分為行內、塊狀、行內塊元素三種。
• 塊元素和行內塊元素可以設置寬高
• 行內元素不可以，高度由內容撐開
• 三者是可以通過display屬性任意轉換的 block 塊狀元素 inline-block行內塊元素 inline 行內元素

2.3 塊級元素特征

• 可以設置寬高
• 設置margin、padding的上下左右都有效
• 元素獨占一行
• 多個塊狀元素一起寫，默認排列從上至下

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

2.4 行內塊元素特征

• 能設置寬高
• 不會自動換行
• 多個行內塊一起寫，默認從左至右排列

2.5 行內元素特征

• 設置寬高無效
• 設置margin的上下無效，左右有效，設置padding上下左右都有效（并且會撐大空間）
• 不會自動換行

3 CSS

3.1 請說出3個CSS瀏覽器前綴

1. -ms- 兼容IE瀏覽器
2. -moz- 兼容firefox
3. -o- 兼容opera
4. -webkit- 兼容chrome和safari

使用demo

div {  -ms-transform: rotate(0);  -webkit-transform: rotate(0);  -moz-transform: rotate(0);  -o-transform: rotate(0);  transform: rotate(0);}

CSS前綴自動補全：autoprefixer

3.2 盒模型

1. 盒模型分為標準盒模型和怪異盒模型(IE5.X和6)兩種
2. 標準盒模型 width=content
3. 怪異盒模型 width=content + padding + border

已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;


標準盒模型:1\. 占用寬:margin*2+padding*2+border*2+width=20*2+10*2+10*2+200=2802\. 占用高:margin*2+padding*2+border*2+height=20*2+10*2+10*2+50=1303\. 盒子實際寬度:padding*2+border*2+width=10*2+10*2+200=2404\. 盒子實際高度padding*2+border*2+height=10*2+10*2+50=90


怪異盒模型:1\. 占用寬:margin*2+width=20*2+200=2402\. 占用高:margin*2+height=20*2+50=903\. 盒子實際寬度:width=2004\. 盒子實際高度height=50

IE8及更早版本不兼容問題解決方案：在HTML頁面聲明

3.3 box-sizing都有哪些值？他們的寬高分別如何計算？

1. content-box(標準盒模型)|border-box(怪異盒模型)|inherit(繼承父元素)
2. content-box的寬高由content決定
3. border-box的寬高由content+padding+border決定

4. BFC

4.1 什么是邊界塌陷（或邊界重疊）？

1. 兄弟div（上下margin塌陷）
2. 父子div（如果父級div沒有padding\border\inlinecontent, 子級div的margin會向上查找邊界塌陷的div，直到找到某個標簽包括border\padding\inline content的其中一個，然后按此div進行margin）

4.2 什么是BFC（格式化上下文）？如何實現？

BFC（塊狀格式化上下文，獨立的盒子，布局不受外部影響，但是如果同一個BFC中，同級塊狀元素的margin-top和margin-bottom會重疊）

只要元素滿足下面的任一條件，都會觸發(fā)BFC特征。

1. body根元素
2. position: fixed|absolute(絕對定位元素)
3. float(浮動元素) 除了none
4. overflow: hidden|auto|scroll (除了visible之外的值)
5. display: inline-block\ table-cells\flex （具有table-的屬性）

解決問題:

1. 解決邊界塌陷問題
2. 解決浮動元素導致父元素高度塌陷問題
3. 解決阻止元素被浮動元素覆蓋問題

4.3 多個inline元素之間會有空隙，為什么？如何解決？

元素被當成行內元素排版時，元素直接的空白符會被瀏覽器處理，根據white-spack的處理方式（默認是normal,合并多余空白），Html代碼在回車換行時被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block元素之間就出現了空隙。

復現<ul>  <li>首頁</li>  <li>登陸</li>  <li>資源</li>  <li>社區(qū)</li>  <li>幫助</li></ul>


解決辦法：

1. 多個inline元素寫在同一行
2. 將父級元素的font-size:0
3. 給inline元素添加float的樣式
4. 設置子元素的margin為負值
5. 設置父元素display:table和word-spacing:-1em

5 浮動

5.1 浮動會出現什么問題？

• 浮動會導致父元素高度塌陷
• 會覆蓋其他元素

5.2 如何清除浮動？

• 父元素加上overflow:hidden
• 在浮動元素的后面（同級），添加一個div，屬性是clear:both
• 在父元素添加一個偽元素 .clearfix:after { display: block; height: 0; visibility: hidden; clear: both; content: '';} .clearfix{ //IE6模式下 zoom:1;}
• 在父元素添加雙偽元素 .clearfix:before,.clearfix:after { display: table; content: '';}.clearfix:after { clear: both;}.clearfix { zoom: 1; //兼容IE6下}

6 position都有哪些值？

• relative 相對定位 （相對元素在文檔中的初始位置定位）
• absolute絕對定位（相對于定位元素定位，最頂級是body）
• fixed 固定定位 （相對窗口定位）
• static 文檔流


7 CSS的選擇器

7.1 CSS的選擇器有哪些？

• id 選擇器
• class 選擇器
• tag 選擇器
• 屬性 選擇器（a[href=""] ）
• 派生 選擇器

7.2 優(yōu)先級高低如何判斷？

• 不同級優(yōu)先級： ！important>內聯>id>class=屬性=偽類 >標簽=偽元素 > 通配符（*）
• 同一級別： 后來居上 （后寫覆蓋先寫） 內聯樣式 > 內部樣式表 > 外部樣式表 > 導入樣式 @import 

優(yōu)先級相同時會發(fā)生什么? 樣式被覆蓋

7.3 列舉幾條常用的CSS reset

• *{ margin:0; padding:0;}
• ol, ul { list-style:none;}
• body {line-height:1;}

7.4 是否了解normalize？

normalize.css是一個css reset的替代方案。

• 保護有用的瀏覽器默認樣式而不是完全去掉
• 一般化樣式：為大部分html元素提供
• 修復瀏覽器自身的bug
• 優(yōu)化css可用性
• 解釋代碼

7.5 如何做到一個list中奇數和偶數行的背景色不一樣？

 ul>li:nth-child(2n+1) {    background-color: red; }ul>li:nth-child(2n) {    background-color: yellow;}

7.6 如何做到一個list的第一行沒有上邊框？

 ul>li:first-child {      border-top: none;  }

有夢想的人，眼睛會發(fā)光。

希望屏幕前的你，能夠關注我一波。接下來，我會分享前端各種干貨，以及編程中的趣事。