CSS的列表項(xiàng)能夠?qū)崿F(xiàn)自動換行,通過使用white-space屬性來實(shí)現(xiàn)。
ul{ white-space: normal; }
這樣我們就可以實(shí)現(xiàn)在列表項(xiàng)超出容器寬度時自動換行。
當(dāng)然,我們還可以使用別的屬性來實(shí)現(xiàn)不同的效果,如:
ul{ white-space: nowrap; }
這樣的話,在列表項(xiàng)超出容器寬度時,會出現(xiàn)橫向滾動條,使得所有列表項(xiàng)都能夠橫向排列。
另一種常見的效果是,當(dāng)文本溢出容器時使用"..."省略號來代替。這時可以使用以下屬性:
ul{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
這樣當(dāng)列表項(xiàng)里的文字超出容器寬度時,就會顯示為"..."。
總的來說,使用CSS的列表項(xiàng)自動換行是非常靈活的,不同情況下可以使用不同的屬性來控制效果。