站長(zhǎng)資訊網(wǎng)
本文介紹在百度智能小程序開(kāi)發(fā)中，如何將溢出的文本顯示為省略號(hào)。
目前在移動(dòng)端開(kāi)發(fā)的展示界面中，如果一段文本的數(shù)量過(guò)長(zhǎng)，受限于屏幕的寬高等因素，有可能不能完全顯示，為了提高用戶的使用體驗(yàn)，這個(gè)時(shí)候就需要我們把溢出的文本顯示成省略號(hào)。
接下來(lái)我們來(lái)看一下對(duì)于下面這一段文本內(nèi)容，我們可以如何實(shí)現(xiàn)行文本溢出的樣式吧：
- 單行文本溢出
- 多行文本溢出：5行以下的內(nèi)容全顯示；5行以上（含5行）只顯示5行，超出部分省略號(hào)展示；5行以上顯示展開(kāi)按鈕。點(diǎn)擊展開(kāi)， 顯示全部?jī)?nèi)容以及收起按鈕；點(diǎn)擊收起，折疊內(nèi)容并顯示展開(kāi)按鈕。
悠悠竹林，萬(wàn)頃翠色，幾多清幽和寧?kù)o，自然沒(méi)有城市的喧囂和雜亂。若有雨徐徐飄落，在綠綠的枝葉上騰起裊裊輕煙，如霧，如云，更似一幅水墨丹青，流芳沁馨，不知泊了誰(shuí)的夢(mèng)懷。更醉人的是那動(dòng)聽(tīng)的雨聲，疏疏落落，瀟然成音成曲。此時(shí)，雨為纖指竹為弦，清風(fēng)流韻，細(xì)彈心語(yǔ)，聽(tīng)雨的人，便是知音。
單行文本溢出
1.在js文件中，輸入文本內(nèi)容：
Page({ data: { content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就無(wú)所謂放下;有的人拿得起，卻放不下。拿不起，就會(huì)一事無(wú)成;放不下，就會(huì)疲憊不堪。人生外在的一切最終絲毫也帶不走，晚放下不如早放下。放下無(wú)謂的負(fù)擔(dān)，才能一路自在。' } });
2.在css文件中使用text-overflow: ellipsis設(shè)置行尾顯示尾省略號(hào)：
white-space: nowrap; /* 不換行 */ overflow: hidden; /* 超出隱藏 */ text-overflow: ellipsis; /* 超出部分顯示省略號(hào) */
多行文本溢出
5 行以下的內(nèi)容全顯示
1.在js文件中，輸入文本內(nèi)容：
Page({ data: { content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就無(wú)所謂放下;有的人拿得起，卻放不下。拿不起，就會(huì)一事無(wú)成;放不下，就會(huì)疲憊不堪。人生外在的一切最終絲毫也帶不走，晚放下不如早放下。放下無(wú)謂的負(fù)擔(dān)，才能一路自在。' } });
2.在css文件中使用text-overflow: ellipsis設(shè)置行尾顯示尾省略號(hào)，多行文本溢出：
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* 指定顯示文本的行數(shù) */ overflow: hidden; /* 超出隱藏 */
5行以上（含5行）只顯示5行，超出部分省略號(hào)展示
1.在js文件中，輸入文本內(nèi)容：
Page({ data: { content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就無(wú)所謂放下;有的人拿得起，卻放不下。拿不起，就會(huì)一事無(wú)成;放不下，就會(huì)疲憊不堪。人生外在的一切最終絲毫也帶不走，晚放下不如早放下。放下無(wú)謂的負(fù)擔(dān)，才能一路自在。' } });
2.在css文件中使用text-overflow: ellipsis設(shè)置行尾顯示尾省略號(hào)，多行文本溢出：
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* 指定顯示文本的行數(shù) */ overflow: hidden; /* 超出隱藏 */ text-overflow: ellipsis; /* 超出部分顯示省略號(hào) */
5行以上顯示展開(kāi)按鈕
點(diǎn)擊展開(kāi)， 顯示全部?jī)?nèi)容以及收起按鈕；點(diǎn)擊收起，折疊內(nèi)容并顯示展開(kāi)按鈕，
