如何使用「white-space」和「overflow」來控制 CSS 中的文字換行？

控製文字換行：探索「空白」及其他

在Web 開發中，管理文字格式對於美觀和可讀性至關重要。然而，有時，文字可能會超出預期的邊界，從而產生不必要的換行符。為了解決這個問題，CSS 中的「white-space」屬性是不可或缺的。

將「white-space」設定為「nowrap」會指示瀏覽器防止文字在元素內換行，本質上是強制其保留在元素上單線。當使用基於約束的佈局或控制狹窄區域中的文字流時，此技術特別有用。

除了「空白」之外，另一個可以影響文字換行的屬性是「溢出」。透過將“溢出”設為“隱藏”，您可以截斷超出元素邊界的任何多餘內容，從而有效地將其隱藏在視圖之外。這可以與“text-wrap”結合使用來建立受控的單行文字顯示。

以下是同時使用「white-space」和「overflow」的範例程式碼：

div {
  white-space: nowrap;
  overflow: hidden;
  height: 30px;
  max-width: 200px;
}

此程式碼將div 元素內文字的寬度限制為200 像素，並將其高度設定為30 像素。此 div 中的文字現在將水平流動，直到到達元素末尾，而不會換行到多行。

需要注意的是，較舊的瀏覽器可能不支援“文字換行”，因此對於跨瀏覽器相容性，建議使用“空白”和“溢位”組合來達到預期效果。

以上是如何使用「white-space」和「overflow」來控制 CSS 中的文字換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！