如何通過CSS讓多行文本兩端對齊並添加下劃線？

CSS實現多行文本兩端對齊及下劃線效果

在網頁設計中，經常需要對多行文本進行特殊樣式處理，例如實現兩端對齊並添加下劃線。本文將介紹如何使用CSS高效地實現這一效果。

需求分析

目標是創建一個CSS樣式，使多行文本滿足以下條件：

1. 動態行數:能夠適應不同行數的文本內容。
2. 自定義下劃線:可以調整下劃線的顏色和與文本的垂直距離。
3. 兩端對齊:文本內容兩端對齊顯示。

解決方案

我們採用CSS的text-align: justify;實現兩端對齊，並巧妙利用background-image和線性漸變模擬下劃線效果，避免使用實際的<hr>標籤帶來的佈局問題。

1. 基礎樣式:設置文本的基本樣式，包括字體大小、行高等。

    .justified-text {
     font-size: 14px;
     line-height: 25px;
     text-align: justify; /* 兩端對齊*/
     text-justify: inter-word; /* 處理單詞間距*/
   }

2. 模擬下劃線:使用線性漸變作為背景圖片，創建下劃線效果。顏色和位置可自定義。

    .justified-text {
     /* ... (基礎樣式) ... */
     background-image: linear-gradient(to right, #000000, #000000); /* 黑色下劃線*/
     background-position: bottom;
     background-size: 100% 2px; /* 調整下劃線厚度*/
     background-repeat: no-repeat;
     padding-bottom: 5px; /* 調整下劃線與文本的距離*/
   }

   您可以將#000000更改為其他顏色，調整background-size控制下劃線厚度，以及padding-bottom調整下劃線與文本的間距。

通過以上CSS代碼，即可輕鬆實現多行文本的兩端對齊和下劃線效果。 記住將.justified-text類應用於包含您需要格式化文本的HTML元素。 text-justify: inter-word;確保在兩端對齊時單詞間距合理。 這種方法比直接使用border更靈活，也更易於控製樣式。

以上是如何通過CSS讓多行文本兩端對齊並添加下劃線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！