【前端開發】如何透過 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 ，我們下次見。
414會員
97內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單
今天想透過這篇文章與各位分享如何透過 Chrome Devtool 的 Performance Tab 來檢測網頁在執行時的各種效能指標，讓網頁的 Runtime Performance 不再成為你 debug 時的瓶頸！
npm 是一個套件管理工具，開發中經常需要使用第三方套件，npm 是可以用來管理很多套件的工具，這邊指的套件可能是 Library, 框架, 工具等，例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
本篇最主要是要了解網站前端工程師究竟是什麼？主要工作內容又有哪些？將從三個部份來說明：前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
本文題目來自網站codesignal，它是個可依自己選取的程式語言進行測驗，測驗難易程度會逐題增加，可透過解題來獲得分數以及徽章，相當有趣味性。在sumbit後可在左欄看到票選最高的解法，這些解法來自不同語言，當然你可以在上面篩選自己撰寫的程式語言。沒有所謂的最好的解法，只有最適合的方式。
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單
今天想透過這篇文章與各位分享如何透過 Chrome Devtool 的 Performance Tab 來檢測網頁在執行時的各種效能指標，讓網頁的 Runtime Performance 不再成為你 debug 時的瓶頸！
npm 是一個套件管理工具，開發中經常需要使用第三方套件，npm 是可以用來管理很多套件的工具，這邊指的套件可能是 Library, 框架, 工具等，例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
本篇最主要是要了解網站前端工程師究竟是什麼？主要工作內容又有哪些？將從三個部份來說明：前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
本文題目來自網站codesignal，它是個可依自己選取的程式語言進行測驗，測驗難易程度會逐題增加，可透過解題來獲得分數以及徽章，相當有趣味性。在sumbit後可在左欄看到票選最高的解法，這些解法來自不同語言，當然你可以在上面篩選自己撰寫的程式語言。沒有所謂的最好的解法，只有最適合的方式。