文字超出換行的處理方法

一、CSS文字超出換行

CSS控制文本的溢出，主要有以下幾種方式：

1. text-overflow屬性

    
        .txt{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* 顯示省略號 */
        }

以上代碼和CSS，當文字超出200px寬度時，超出部分用省略號表示。如果不需要省略號，可以使用text-overflow: clip; 來實現。

2. word-break屬性

    
        .txt{
            width: 300px;
            word-break: break-all; /* 字符會跨行斷開，不考慮單詞 */
        }

以上代碼和CSS，當文字超過300px寬度時，讓文字在字符處斷開，而不是在單詞的中間斷開。

3. white-space屬性

    
        .txt{
            white-space: pre-wrap; /* 自動換行，保留連續空格和換行符 */
        }

以上代碼和CSS，當文本太長時，自動折行。但保留連續空格和換行符，
等同於在HTML代碼中用 “

” 標籤，保留換行符和空格。

二、CSS圖片超出換行

當圖片尺寸過大，超出了父級元素的寬度時，圖片會響應式縮小，但是圖片的長寬比會被改變，導致變形。
因此使用以下方法，將大圖片等比例縮小，且不變形。

1. max-width屬性

    
        .img{
            max-width: 100%;
            height: auto;
        }

以上代碼和CSS，當圖片寬度超過父級元素時，將圖片自動縮小，不會變形。

三、文字自動換行

如果文本中包含的單詞過長，無法進行折行，而只能在較前的位置進行斷行，可能會影響排版美觀度。這時我們使用以下屬性來自動將文本折行。

1. hyphens屬性

    
        .txt{
            width: 300px;
            hyphens: auto;/* 自動斷行 */
        }

以上代碼和CSS，當單個單詞長度超過300px時，在單詞內部進行斷行處理。
但是，該屬性不支持所有瀏覽器，如IE、Edge瀏覽器就不支持。

2. word-wrap屬性

    
        .txt{
            width: 300px;
            word-wrap: break-word;/* 自動換行 */
        }

以上代碼和CSS，當單個單詞長度超過300px時，直接在單詞內部進行斷行處理。和hyphens相比，word-wrap支持更多的瀏覽器，並且能在單詞中間進行斷行。

原創文章，作者：QOFJI，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/360969.html