<標記>受標記影響的內容</標記>

<a>,<em>,<font>,<input>

<div>,<h1>,<p>,<table>

<!--注釋內容-->

文字<br>
<nobr>文字</nobr>

<p align="left|center|right">文字</p>

<hr align = "left|center|right" size="線條粗細" width="線條長度" color="顏色值" noshade>

<div>是一個塊元素,他周圍的元素會自動換行,<span>是一個行內元素

<h#>標題文字</h#>,其屬性主要有align,默認為左對齊

<font size="數字" face="字體名" color="顏色值">被設置的文字</font>

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

因為我沒有系統的學過前端，就是遇到一點問題學習一點前端知識。當我在這次實現換行效果的過程中就學習使用了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布局的文檔。改來改去一個小時就過去了。內心有點失敗的挫折感。這個時候，是不是就說明換行符號不是從變量里面傳遞過來的呢？

于是，再去查看代碼，發現了代碼被編輯器格式話之后換行了，在網上查找資料也終于瞅到有人說到這一點了。于是嘗試了修改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
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。