在設計網頁文字時，會需要在文字加上「底線」來強調重點，但一般的 text-decoration: underline; 有一個限制 —— 在具有多行文字時，在最後一行文字的底線無法填滿整行文字段落，而是只能到達文字尾端。

這篇文章要透過使用一小段 CSS，製作出更「優雅」的多行底線效果 

音樂藝文

職場

學習

以行動支持創作者！付費即可解鎖

設計

前端漫遊錄

親愛的訪客您好！我是 dizzydog，一位熱衷於前端技術的工程師。這個部落格是我的數位筆記本，記錄著我在程式開發路上的各種發現、挑戰與突破。我相信「輸出」是最有效的學習方式，透過清晰地表達所學，不僅能加深自己的理解，也能幫助其他走在相同道路上的開發者。

歡迎您在這裡探索以及交流。

dizzydog的沙龍

網頁

來點CSS 多行文字底線：告別不完整底線，打造優雅網頁排版

顯示文字

Text('123456')



限制行數

Text('1\n2\n3\n4\n5\n6', maxLines: 2)



顯示樣式

字體大小

Text('123456', style: TextStyle(fontSize: 30))



字體顏色

Text('12345