CSS(層疊樣式表)是一種用于描述網頁樣式和布局的語言,它可以調整HTML元素的外觀和排版。其中,最常用的樣式屬性之一是 max-height 和 text-overflow,它們可以幫助我們實現最多顯示2行的文本效果。
.overflow-text { max-height: 2.4em; /* 設置最大高度為兩行,留出一定余量避免出現省略號 */ overflow: hidden; /* 隱藏超過最大高度的文本 */ text-overflow: ellipsis; /* 當文本超出容器范圍時,用省略號代替 */ white-space: nowrap; /* 禁止文本自動換行 */ }
使用以上CSS代碼,我們可以將超過兩行的文本在容器內進行截取,以省略號表示截斷的位置。如果你想要調整文本的行數,只需要更改 max-height 的值即可。
需要注意的是,該效果只適用于單行文本或者固定寬度的容器。如果文本行數不固定或者容器寬度會發生變化,我們需要通過 Javascript 動態計算文本高度和容器寬度進行實現。以上是一個簡單的實現方法,你可以根據實際需求進行更改和優化。
上一篇css最多支持幾臺設備
下一篇css最多顯示三行