CSS是網頁設計中不可或缺的一部分,它的作用不僅僅是美化頁面,還可以實現一些實用的功能,比如限制字符后加省略號。
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
以上的CSS代碼可以限制p標簽內的文字長度,當文字超出容器而導致溢出時,會在結尾處加上省略號來代替強制換行。其中,overflow: hidden;
屬性表示超出容器的部分將被隱藏,text-overflow: ellipsis;
屬性用于在文字結尾處加上省略號,white-space: nowrap;
屬性則表示文字不允許換行。
該方法適用于多種場景,比如新聞列表、商品列表等需要顯示標題的情況,但是由于標題長度不同,顯示出來的效果也會不同,如果沒有做過限制,頁面會出現丑陋的布局,影響用戶體驗。
除了以上方法,還可以通過JavaScript來實現該功能,但是CSS的方法更簡單、更高效、更易于維護與修改。需要注意的是,如果容器本身就比文字長度小,那么該方法將無法實現效果。