CSS(Cascading Style Sheets,層疊樣式表)是一種用于網頁設計的語言,它可以讓我們對HTML中的文本、圖片、鏈接、表格等元素進行美化和排版。其中,限制文本行數是CSS中常見的需求之一,下面介紹兩種實現方式。
方法一:使用文本溢出省略號
.text { width: 200px; height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
上述代碼中,我們用width和height限制了文本的寬度和高度,當文本超出這個范圍時,我們通過overflow:hidden來隱藏溢出的文本。此外,我們還使用text-overflow屬性將超出的文本替換成省略號。最后,white-space屬性將空格也視為字符,使其不會被換行。
方法二:使用多行文本溢出省略號
.text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
上述代碼中,我們使用display: -webkit-box將文本顯示為一個塊級元素,并設置-webkit-line-clamp屬性為2,表示限制文本最多顯示2行。-webkit-box-orient: vertical屬性用于將文本沿垂直方向排列。溢出的文本將被隱藏,但不會被替換成省略號。
以上就是兩種CSS文本限制兩行的實現方式,可以根據不同需求選擇使用。
下一篇css文本超出略號