如何調整 Div 中最後一行文字的對齊方式？-css教學-PHP中文網

如何調整 Div 中最後一行文字的對齊方式？

Susan Sarandon

發布： 2024-12-16 16:44:13

原創

136 人瀏覽過

How Can I Justify the Last Line of Text in a Div?

將Div 的最後一行與對齊文字對齊

在某些情況下，需要將div 的最後一行與對齊文字對齊合理的文本。雖然這通常不是 div 的標準行為，但跨瀏覽器方法可以實現這種預期效果。

實作需要結合使用 text-align-last: justify;以及 :after 偽內容方法的變體。 CSS 組合成功解決了瀏覽器相容性問題，包括 IE6。

應用此方法：

CSS:

p, h1 {
  text-align: justify;
  text-align-last: justify;
}

p:after, h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

登入後複製

注意： 如果您的div 僅包含一行文本，則需要額外的CSS來防止額外的空白行出現：

h1 {
  text-align: justify;
  text-align-last: justify;
  height: 1em;
  line-height: 1;
}

h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

登入後複製

此技術成功確保 div 的最後一行與合理的文字對齊，為各種網頁設計需求提供了更大的文字格式彈性。

以上是如何調整 Div 中最後一行文字的對齊方式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！