CSS中的標(biāo)題通常用于網(wǎng)頁的排版,其樣式可以根據(jù)需求來定義,比如字號、顏色、字體等等。但是,有時候我們希望標(biāo)題的每行顯示的字?jǐn)?shù)是固定的,這就需要用到CSS中的換行控制。
在CSS中,我們使用word-wrap屬性來控制文字換行的方式。常見的取值有normal、break-word等等。其中,break-word會強(qiáng)制將單詞拆分到下一行。如下示例:
h1 { word-wrap: break-word; width: 200px; }
這段代碼定義了h1標(biāo)簽的寬度為200px,當(dāng)標(biāo)題的內(nèi)容超過200px時,會自動進(jìn)行換行。如果有單詞在拆分后太短,則需強(qiáng)制將其拆分到下一行以避免排版不美觀。
另外,我們還可以使用text-overflow屬性來控制過長的標(biāo)題的顯示方式。常見的取值有ellipsis、clip等等。其中ellipsis會在標(biāo)題內(nèi)容過長時顯示省略號,clip則直接截斷超出的部分。如下示例:
h1 { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
這段代碼定義了h1標(biāo)簽的寬度為200px,當(dāng)標(biāo)題的內(nèi)容超過200px時,會自動隱藏超出部分,并在末尾顯示省略號。white-space: nowrap屬性則定義了標(biāo)題不可換行,保證了每行顯示的字?jǐn)?shù)固定。