【前端開發】如何透過 CSS 實作段落的斷行效果，white-space 語法應用
更新於 發佈於 閱讀時間約 2 分鐘
說到 HTML 元素的換行效果，在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行。
不過有一些狀況下會不希望改變元件的結構，或是因應 API 、多語系內容，每個資料欄位各自會有各自的斷行效果，此時使用 <br /> 元素來換行就會很麻煩，因為換行的效果是因情境改變。
在這樣的情況下，我們可以使用 \n 換行字元搭配 CSS 中的語法：white-space 來做到換行效果。
white-space 語法介紹
根據 MDN ，white-space 是一個可以針對空白符號、換行字元進行處理的語法，主要有以下類別：
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
- normal：遇到連續空白、換行字元時，會合併成一個空白字元，自動換行。
- nowrap：遇到連續空白字元與換行字元時，會合併成一個空白字元，不論外層有沒有容器都強制不換行。
- pre：保留連續空白、換行字元，不自動換行（可以想像成 nowrap 但保留所有字元的原始機制）。
- pre-wrap：保留連續空白、換行字元，且自動換行。
- pre-line：遇到連續空白字元時，會合併成一個空白字元，但保留換行字元，會自動換行。
我們可以用表格來看會更清楚：
備註：pre 是 preserve 的縮寫。
如果要解決在同一個元件上，可能會有多種不同換行情境的文案帶入，且不想要改變 HTML 元素的結構的話，pre-line 是一個比較符合開發情境，也非常方便的語法，簡單分享給大家，如果想要更精準知道實際套用在網頁的段落語法上會長怎麼樣，可以參考 MDN 文件下方的提供的互動範例來更了解這個語法的功能。
希望這篇文章可以帶大家了解這個方便又簡單的小語法，我是 Vivian ，我們下次見。
436會員
102內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
前言
那麼今天要來教大家，如何實現各種排版，以及不同的 CSS 可以做出怎樣的效果。
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
字體相關
color
設定文字的顏色。
<p style="color: blue;">這是藍色文字。</
在閱讀文言文時，很多同學會遇到困難，除了詞彙難懂外，文字順序也怪怪的，讓你無法順利翻成白話文，這是因為文言文「語序」與白話文有些不同，你知道是那些不同嗎？這次的文章要介紹文言文的倒裝現象，說明文言文與白話文語序不同的原因，這樣各位同學之後就能夠還原成白話文語序，有利解讀了！
在閱讀文言文時，很多同學會遇到困難，除了詞彙難懂外，文字順序也怪怪的，讓你無法順利翻成白話文，這是因為文言文「語序」與白話文有些不同，你知道是那些不同嗎？這次的文章要介紹文言文的倒裝現象，說明文言文與白話文語序不同的原因，這樣各位同學之後就能夠還原成白話文語序，有利解讀了！
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
前言
那麼今天要來教大家，如何實現各種排版，以及不同的 CSS 可以做出怎樣的效果。
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
字體相關
color
設定文字的顏色。
<p style="color: blue;">這是藍色文字。</
在閱讀文言文時，很多同學會遇到困難，除了詞彙難懂外，文字順序也怪怪的，讓你無法順利翻成白話文，這是因為文言文「語序」與白話文有些不同，你知道是那些不同嗎？這次的文章要介紹文言文的倒裝現象，說明文言文與白話文語序不同的原因，這樣各位同學之後就能夠還原成白話文語序，有利解讀了！
在閱讀文言文時，很多同學會遇到困難，除了詞彙難懂外，文字順序也怪怪的，讓你無法順利翻成白話文，這是因為文言文「語序」與白話文有些不同，你知道是那些不同嗎？這次的文章要介紹文言文的倒裝現象，說明文言文與白話文語序不同的原因，這樣各位同學之後就能夠還原成白話文語序，有利解讀了！
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。