巧用css屬性white-space展示文本

来源:https://www.cnblogs.com/lin494910940/archive/2022/11/23/16917049.html
-Advertisement-
Play Games

寫在前面的話 大多數標簽在展示文本內容的時候都會預設把文本中的空白和換行符去掉,這的確大大的使得文本的排版更加美觀了,也怎加了區域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那該如何展示出文本的內在格式呢?無外乎把不該去掉的空格展示出來,把不該合併的換行讓它換行起來。 那麼 ...


寫在前面的話

  大多數標簽在展示文本內容的時候都會預設把文本中的空白和換行符去掉,這的確大大的使得文本的排版更加美觀了,也怎加了區域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那該如何展示出文本的內在格式呢?無外乎把不該去掉的空格展示出來,把不該合併的換行讓它換行起來。  

  那麼 white-space  作用具體是什麼呢?在MDN 上的解釋為 :

  • 空白字元是否以及如何它們該如何合併。
  • 行是否採用軟換行(軟換行可以理解為受到父容器寬度的影響,為了避免不超出父容器而自發的換行)。

white-space的關鍵值

  • white-space:normal
  • white-space:nowrap
  • white-space:pre
  • white-space:pre-wrap
  • white-space:pre-line
  • white-space:break-spaces

關鍵值逐個解析

white-space:normal

連續的空白符會被合併,換行符會被當作空白符來處理。換行在填充時是必要。也就是說不管是文本中是否有空白符和換行符都會被省略。並且遇到父容器需要換行填充的時候也會自動換行。大多數的標簽white-space都是normal 。

html實例代碼如下:

white-space:normal
<fieldset>
    <legend> white-space:normal</legend>
    <div class="normal">
        這是第一行,我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
        這是第二行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />我的前面有br標簽,我的後面有五個空白符
        這是第三行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />
    </div>
</fieldset>

顯示效果如下:

white-space:nowrap

和 normal 一樣,連續的空白符會被合併。但文本內的換行無效。只有使用br標簽才能換行,並且不進行軟換行。

html實例代碼如下:

white-space:nowrap
 <fieldset>
    <legend> white-space:nowrap</legend>
    <div class="nowrap">
        這是第一行,我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
        這是第二行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />我的前面有br標簽,我的後面有五個空白符
        這是第三行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />
    </div>
</fieldset>

顯示效果如下:

white-space:pre

連續的空白符會被保留。在遇到換行符或者<br>元素時才會換行。

順帶一說標簽pre的 white-space的預設屬性pre

html實例代碼如下:

white-space:pre
 <fieldset>
    <legend> white-space:pre</legend>
    <div class="pre">
        這是第一行,我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
        這是第二行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />我的前面有br標簽,我的後面有五個空白符
        這是第三行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />
    </div>
</fieldset>

顯示效果如下:

white-space:pre-wrap

連續的空白符會被保留。在遇到換行符或者<br>元素,或者需要為了填充時才會換行(軟換行)。

html實例代碼如下:

white-space:pre-wrap
 <fieldset>
    <legend> white-space:pre-wrap</legend>
    <div class="pre-wrap">
        這是第一行,我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
        這是第二行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />我的前面有br標簽,我的後面有五個空白符
        這是第三行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />
    </div>
</fieldset>

顯示效果如下:

white-space:pre-line

連續的空白符會被合併。在遇到換行符或者<br>元素,或者需要為了填充時會換行(軟換行)。

html實例代碼如下:

white-space:pre-line
 <fieldset>
    <legend> white-space:pre-line</legend>
    <div class="pre-line">
        這是第一行,我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
        這是第二行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />我的前面有br標簽,我的後面有五個空白符
        這是第三行,我的後面有九個空白符 我的前面有九個空白符,並且我的後面有br標簽<br />
    </div>
</fieldset>

顯示效果如下:

white-space:break-spaces

break-spaces 與 pre-wrap的行為相同,也就是說連續的空白符會被保留。在遇到換行符或者<br>元素,或者需要為了填充時才會換行(軟換行)。除了:

  • 任何保留的空白序列總是占用空間,包括在行尾。如果行尾的空白符夠多就會看到空白符占用了一行,pre-wrap 是沒有這種現象的。
  • 每個保留的空格字元後都存在換行機會,包括空格字元之間。
  • 這樣保留的空間占用空間而不會掛起,從而影響盒子的固有尺寸(最小內容大小和最大內容大小)。

html實例代碼如下:

顯示效果如下:

以下表格是對white-space 各個關鍵值的綜合對比

關鍵字名稱 換行符 空格和製表符 文字換行 行尾空格
normal 合併 合併 換行 刪除
nowrap 合併 合併 不換行 刪除
pre 保留 保留 不換行 保留
pre-wrap 保留 保留 換行 掛起
pre-line 保留 合併 換行 刪除
break-spaces 保留 保留 換行 換行

 

以上使用的樣式部分的公共代碼如下:

css公共代碼
 <style>
        div {
            border: 1px solid #eee;
            margin: 30px;
            padding: 30px;
            max-width: 400px;
        }

        .normal {
            white-space: normal
        }

        .nowrap {
            white-space: nowrap
        }

        .pre {
            white-space: pre
        }

        .pre-wrap {
            white-space: pre-wrap
        }

        .pre-line {
            white-space: pre-line
        }

        .break-spaces {
            white-space: break-spaces
        }
 </style>

總結:

  在不知道有這個屬性的時候,往往會想到將換行符替換成<br/>標簽進行換行,現在要實現同樣的效果,設置一下white-space的值就搞定了。快的呢!

微信公公眾號 搜索 “不正經小前端” 並關註,和我一起學習海量前端技術

本文來自博客園,作者:七分暖,轉載請註明原文鏈接:https://www.cnblogs.com/lin494910940/p/16917049.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 華為HMS Core音頻編輯服務(Audio Editor Kit)依托自身AI技術的研發優勢,上線全新的歌聲合成音色及伴奏,給音視頻創作者提供更多的創作可能。在短視頻場景中,用戶自定義歌詞的歌聲結合視頻讓用戶感受到身臨其境,自由表達自己的情緒;在虛擬偶像場景中,歌聲合成功能賦予虛擬歌手們演唱風格各 ...
  • Vue CartView.vue script 數組的filter函數需要return顯式返回布爾值,該方法得到一個新數組。 使用Vuex store的modules方式,註意讀取狀態的方式 this.$store.state.cart.items 刷新頁面後state狀態還原,需要用session ...
  • vue 指令與過濾器 內容渲染指令 內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有3種。 v-text 示例 <div id="app"> <!-- 把 username 對應的值,渲染到第一個 p 標簽中 --> <p v-text="username"></p> ...
  • vue3 正式發佈有兩年多了,之前也做過一些學習和研究。vue3 發佈後給某培訓機構開發了一套vue3課程課件,自己也開源了一套基於vue3的後臺管理系統(因為個人懶的原因,半年後才上傳到gitHub,且到目前為止一直沒有更新過)。 附上網址:https://github.com/gegestst1 ...
  • 情景說明: 之前用 vue 做數據綁定更新時,發現一個莫名奇妙的問題。 我在 vue 實例中聲明瞭一個數組屬性如 books: [],在非同步請求的回調函數中使用 this.books = res.data.data; 進行數據更新,更新步驟後面緊跟著列印了 console.log(this.book ...
  • webpack優化主要有三個方面:1.提高構建速度,2.減少打包體積,3.優化用戶體驗 提高構建速度: 啟用多線程 thread-loader 使用thread-loader插件可以啟用多線程進行構建。 使用緩存 cache-loader 使用cache-loader插件可以對構建進行緩存,加快後續 ...
  • 前言: 昨天咱們已經把貪吃蛇的頁面寫好了,今天咱們來寫 TS 部分 TS 我們要用面向對象的形式去編寫我們的功能,所以我們要以一個功能去定義一個對象 把這個項目分成幾個模塊,也就是幾個對象功能 Food類(食物類): 寫對象的前提,我們要去定義類,用類去創建對象 首先我們直接 class 一個 Fo ...
  • 如果在後端django里配置了django-cors-headers,前端還是報Access to XMLHttpRequest at‘httplocalhost這樣的跨域問題,可以通過以下的方式解決! 通過配置vue.config.js、proxy 實踐解決跨域方法(基於封裝好的axios,非原生 ...
一周排行
    -Advertisement-
    Play Games
  • 簡介 本文的初衷是希望幫助那些有其它平臺視覺演算法開發經驗的人能快速轉入Halcon平臺下,通過文中的示例開發者能快速瞭解一個Halcon項目開發的基本步驟,讓開發者能把精力完全集中到演算法的開發上面。 首先,你需要安裝Halcon,HALCON 18.11.0.1的安裝包會放在文章末尾。安裝包分開發和 ...
  • 本文是對Datawhale的動手學數據分析課程的學習總結,記錄了整體的學習過程、答案以及個人感想,代碼較為詳細。 ...
  • JZ7重建二叉樹 描述 給定節點數為 n 的二叉樹的前序遍歷和中序遍歷結果,請重建出該二叉樹並返回它的頭結點。 例如輸入前序遍歷序列{1,2,4,7,3,5,6,8}和中序遍歷序列{4,7,2,1,5,3,8,6} 提示: 1.vin.length == pre.length 2.pre 和 vin ...
  • 我們都知道在Java編程中多線程的同步使用synchronized關鍵字來標識,那麼這個關鍵字在JVM底層到底是如何實現的呢。 我們先來思考一下如果我們自己實現的一個鎖該怎麼做呢: 首先肯定要有個標記記錄對象是否已經上鎖,執行同步代碼之前判斷這個標誌,如果對象已經上鎖線程就阻塞等待鎖的釋放。 其次要 ...
  • 目錄 一.OpenGL 色階 1.Windows OpenGL ES 版本 2.Windows OpenGL 版本 二.OpenGL 色階 GLSL Shader 三.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎 零基礎 Ope ...
  • 1. 查看Linux伺服器版本信息 # cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 2. 禪道開源版安裝包下載 wget http://dl.cnezsoft.com/zentao/9.8.2/ZenTaoPMS.9.8. ...
  • Spring 框架可以為 Java 應用程式開發提供全面的基礎設施支持,它是現在非常流行的 Java 開源框架,對於一個 Java 開發人員來說,熟練掌握 Spring 是必不可少的。 ...
  • 前言 本篇是c++總結的第二篇,關於c++的對象模型,在構造、拷貝虛函數上重點分析,也包含了c++11class的新用法和特性,如有不當,還請指教! c++三大特性 訪問許可權 ​ 在c++中通過public、protected、private三個關鍵字來控製成員變數和成員函數的訪問許可權,它們分別表示 ...
  • 一.小結 1.使用二維數組來存儲表格 2.可以使用以下語法來聲明二維數組變數: 元素類型[ ] [ ]數組變數 3.可以使用以下語法來創建二維數組變數: new 元素類型 [行的個數][列的個數] 4.使用下麵的語法表示二維數組中的每個元素: 數組變數[行下標][列的個數] 5.可使用數組初始化語法 ...
  • typimg是一款為typora編輯器提供圖像自定義上傳服務的工具,該工具將在typora中輸入的網路圖片、本地圖片、剪貼板圖片/截圖上傳到博客園,支持在MacOS、Windiws、Linux三個平臺上運行。 ...