CSS文字自動伸展是一種常見的技術,它可以讓文本適應不同的屏幕大小并且自動換行,不管是在PC端的網頁還是移動端的網頁都可以使用這種技術。
p { white-space:nowrap; //不換行 overflow:hidden; //超出部分隱藏 text-overflow:ellipsis; //顯示省略號 } @media screen and (max-width: 600px) { p { white-space:normal; //換行顯示文本 overflow:visible; //不隱藏溢出部分 text-overflow:clip; //不顯示省略號 } }
上述代碼中,white-space屬性是用來控制是否自動換行的,nowrap表示不自動換行,normal表示自動換行;overflow屬性可以設置當文本超出容器時的處理方式,hidden表示隱藏超出部分,visible表示顯示超出部分;text-overflow屬性是用來控制當文本溢出容器時是否使用省略號代替。
在上述代碼中,使用了@media查詢來針對不同的屏幕大小做不同的處理,當屏幕寬度小于600像素時,自動換行,并設置不顯示省略號。
通過使用CSS文字自動伸展技術,我們可以確保文字能夠適應多種屏幕,并且保證內容的可讀性和用戶體驗。