Skip to main content

text-align:justify、text-align-last:justify 介紹

1. text-align: justify 的用法介紹​

定義​

text-align: justify 是 CSS 屬性，用來控制塊級元素或行內塊元素內文字的水平對齊方式。當設定為 justify 時，文字會在每一行均勻分佈，左右兩端對齊（類似報紙或書籍的排版效果），除了最後一行外。最後一行的對齊方式通常由瀏覽器預設處理（通常是左對齊）。

語法​

text-align: justify;

適用範圍​

  • 適用於塊級元素（例如 <div>、<p>）或設置為 display: block 或 display: inline-block 的元素。

  • 主要影響多行文字，因為單行文字無法均分間距。

注意事項​

  • justify 會根據文字內容和容器寬度自動調整字詞間的間距。

  • 最後一行的對齊方式預設不會均分，需搭配 text-align-last 來控制。

  • 在某些語言（如中文）中，justify 效果可能不如英文明顯，因為中文沒有明確的單詞間距。

範例程式碼​

以下是一個簡單的 HTML 和 CSS 範例，展示 text-align: justify 的效果：

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>text-align: justify 範例</title>
    <style>
      .container {
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;
      }
      .justify-text {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p class="justify-text">
        這是一段測試文字，用來展示 text-align: justify
        的效果。文字會自動調整間距，使每行左右對齊。這段文字有足夠的內容來展示多行效果。
      </p>
    </div>
  </body>
</html>

操作步驟​

  1. 建立一個 HTML 檔案（例如 index.html）。

  2. 複製上述程式碼並儲存。

  3. 在瀏覽器中開啟檔案，你會看到文字左右對齊，每行間距均勻分佈（除了最後一行）。

效果說明​

  • 文字內容會在容器寬度內均勻分佈，左右邊緣對齊。

  • 如果容器寬度改變，間距會自動調整。

  • 最後一行預設為左對齊，稍後會介紹如何用 text-align-last 控制。

2. text-align-last: justify 的用法介紹​

定義​

text-align-last: justify 是 CSS 屬性，用來控制多行文字的最後一行的對齊方式。當 text-align: justify 應用於文字時，最後一行的對齊方式預設為左對齊（或根據語言方向）。透過 text-align-last: justify，可以讓最後一行也均分間距，與其他行保持一致。

語法​

text-align-last: justify;

常用值​

  • auto：預設值，通常與 text-align 的值一致（例如，text-align: justify 時，最後一行預設左對齊）。

  • left：最後一行左對齊。

  • right：最後一行右對齊。

  • center：最後一行置中。

  • justify：最後一行均分間距，左右對齊。

  • start：根據文字方向（例如，左到右語言為左對齊）。

  • end：根據文字方向（例如，左到右語言為右對齊）。

適用範圍​

  • 必須搭配 text-align: justify 使用，否則效果不明顯。

  • 適用於多行文字的最後一行。

  • 在中文排版中，justify 效果可能因缺乏明確單詞間距而較不明顯。

瀏覽器支援​

  • 大多數現代瀏覽器（如 Chrome、Firefox、Safari）都支援 text-align-last。

  • 舊版瀏覽器（如 IE9 及以下）可能不支援，需檢查相容性。

範例程式碼​

以下是結合 text-align: justify 和 text-align-last: justify 的範例：

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>text-align-last: justify 範例</title>
    <style>
      .container {
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;
      }
      .justify-text {
        text-align: justify;
        text-align-last: justify;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p class="justify-text">
        這是一段測試文字，用來展示 text-align: justify 和 text-align-last:
        justify 的效果。文字會自動調整間距，使每行（包括最後一行）左右對齊。
      </p>
    </div>
  </body>
</html>

操作步驟​

  1. 建立一個新的 HTML 檔案（例如 index2.html）。

  2. 複製上述程式碼並儲存。

  3. 在瀏覽器中開啟檔案，觀察最後一行文字是否也左右對齊。

效果說明​

  • 所有行（包括最後一行）的文字間距均勻分佈，左右對齊。

  • 如果容器寬度改變，間距會重新計算，保持對齊效果。

3. 結合 JavaScript 動態控制​

作為前端工程師，你可能需要透過 JavaScript 動態調整 text-align 或 text-align-last 的值。以下是一個範例，展示如何用 JavaScript 切換對齊方式：

範例程式碼​

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>動態控制 text-align 和 text-align-last</title>
    <style>
      .container {
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;
      }
      .justify-text {
        text-align: justify;
        text-align-last: justify;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p id="text" class="justify-text">
        這是一段測試文字，用來展示 text-align: justify 和 text-align-last:
        justify 的效果。點擊按鈕可切換對齊方式。
      </p>
    </div>
    <button onclick="toggleAlignment()">切換對齊方式</button>

    <script>
      function toggleAlignment() {
        const textElement = document.getElementById("text");
        if (textElement.style.textAlignLast === "justify") {
          textElement.style.textAlign = "left";
          textElement.style.textAlignLast = "left";
        } else {
          textElement.style.textAlign = "justify";
          textElement.style.textAlignLast = "justify";
        }
      }
    </script>
  </body>
</html>

操作步驟​

  1. 建立一個 HTML 檔案（例如 index3.html）。

  2. 複製上述程式碼並儲存。

  3. 在瀏覽器中開啟檔案，點擊「切換對齊方式」按鈕，觀察文字對齊方式從 justify 切換到 left，再切回 justify。

程式碼說明​

  • 使用 document.getElementById 選取文字元素。

  • 透過 style 屬性動態修改 text-align 和 text-align-last。

  • 條件判斷檢查當前對齊方式，實現切換效果。

4. 注意事項與常見問題​

  1. 中文排版效果不佳

    • 中文文字沒有明確的單詞間距，justify 效果可能不明顯。建議在英文或有空格的內容中使用效果更佳。

    • 如果需要中文對齊效果，可以考慮使用 letter-spacing 或其他方式輔助。

  2. 瀏覽器相容性

    • text-align-last 在舊版瀏覽器可能不支援，建議使用現代瀏覽器或提供後備方案（如預設 text-align: justify）。

  3. 單行文字無效果

    • 如果文字只有一行，text-align: justify 和 text-align-last: justify 不會有明顯效果，因為無法均分間距。

  4. 行動裝置顯示

    • 在小螢幕上，容器寬度可能導致文字換行過多，影響 justify 效果。建議使用媒體查詢（media queries）調整樣式。

範例：適應行動裝置​

@media (max-width: 600px) {
  .justify-text {
    text-align: left;
    text-align-last: left;
  }
}

5. 總結​

  • text-align: justify：讓多行文字左右對齊，每行間距均勻分佈（最後一行除外）。

  • text-align-last: justify：控制最後一行的對齊方式，讓最後一行也能均分間距。

  • 結合 JavaScript 可動態切換對齊方式，增加互動性。

  • 在中文環境中，效果可能不如英文明顯，需根據需求調整。