CSS是一種強(qiáng)大的樣式語(yǔ)言,可以對(duì)網(wǎng)頁(yè)中的元素進(jìn)行各種樣式的調(diào)整,其中文字的分行展示也是其中之一。下面我們就來(lái)講一講如何利用CSS來(lái)讓文字分成幾行顯示。
首先,我們可以利用CSS的white-space屬性來(lái)控制文字的換行方式。white-space屬性有幾個(gè)可選項(xiàng),其中比較常用的是nowrap、pre和pre-wrap。
如果我們不想文字自動(dòng)換行,可以將white-space屬性設(shè)為nowrap,即:
p{ white-space: nowrap; }這樣在p標(biāo)簽內(nèi)的文字就不會(huì)在容器寬度達(dá)到極限時(shí)自動(dòng)換行了。 如果我們希望維持文字原本的格式,包括其中的空格、回車符等,可以使用pre屬性,即:
p{ white-space: pre; }這樣p標(biāo)簽內(nèi)的文字就會(huì)按照原本的格式展示,不會(huì)自動(dòng)換行。 當(dāng)然,如果我們既想保持文字的原本格式,又希望文字在達(dá)到容器寬度時(shí)能夠自動(dòng)換行,我們可以使用pre-wrap屬性,即:
p{ white-space: pre-wrap; }這樣p標(biāo)簽內(nèi)的文字就會(huì)同時(shí)保持原本的格式,同時(shí)在容器寬度達(dá)到極限時(shí)自動(dòng)換行。 除了white-space屬性外,我們還可以使用text-wrap、word-wrap和word-break等屬性來(lái)進(jìn)一步控制文字的分行和溢出。比如:
p{ white-space: pre-wrap; text-wrap: unrestricted; word-wrap: break-word; word-break: break-all; }總之,利用CSS來(lái)控制文字的分行展示并不難,只需要根據(jù)自己的需要選擇合適的屬性即可。