本文介紹在百度智能小程序開發(fā)中，如何將溢出的文本顯示為省略號。
目前在移動端開發(fā)的展示界面中，如果一段文本的數(shù)量過長，受限于屏幕的寬高等因素，有可能不能完全顯示，為了提高用戶的使用體驗，這個時候就需要我們把溢出的文本顯示成省略號。
接下來我們來看一下對于下面這一段文本內(nèi)容，我們可以如何實現(xiàn)行文本溢出的樣式吧：
單行文本溢出多行文本溢出：
5行以下的內(nèi)容全顯示；5行以上（含5行）只顯示5行，超出部分省略號展示；5行以上顯示展開按鈕。
點擊展開， 顯示全部內(nèi)容以及收起按鈕；點擊收起，折疊內(nèi)容并顯示展開按鈕。
悠悠竹林，萬頃翠色，幾多清幽和寧靜，自然沒有城市的喧囂和雜亂。
若有雨徐徐飄落，在綠綠的枝葉上騰起裊裊輕煙，如霧，如云，更似一幅水墨丹青，流芳沁馨，不知泊了誰的夢懷。
更醉人的是那動聽的雨聲，疏疏落落，瀟然成音成曲。
此時，雨為纖指竹為弦，清風(fēng)流韻，細(xì)彈心語，聽雨的人，便是知音。
單行文本溢出1.在js文件中，輸入文本內(nèi)容：
Page({
data: {
content:'
人要拿得起，也要放得下。
拿得起是生存，放得下是生活;
拿得起是能力，放得下是智慧。
有的人拿不起，也就無所謂放下;
有的人拿得起，卻放不下。
拿不起，就會一事無成;
放不下，就會疲憊不堪。
人生外在的一切最終絲毫也帶不走，晚放下不如早放下。
放下無謂的負(fù)擔(dān)，才能一路自在。
'
}
}
);
2.在css文件中使用text-overflow: ellipsis設(shè)置行尾顯示尾省略號：
white-space: nowrap;
/* 不換行 */ overflow: hidden;
/* 超出隱藏 */ text-overflow: ellipsis;
/* 超出部分顯示省略號 */多行文本溢出5 行以下的內(nèi)容全顯示1.在js文件中，輸入文本內(nèi)容：
Page({
data: {
content:'
人要拿得起，也要放得下。
拿得起是生存，放得下是生活;
拿得起是能力，放得下是智慧。
有的人拿不起，也就無所謂放下;
有的人拿得起，卻放不下。
拿不起，就會一事無成;
放不下，就會疲憊不堪。
人生外在的一切最終絲毫也帶不走，晚放下不如早放下。
放下無謂的負(fù)擔(dān)，才能一路自在。
'
}
}
);
2.在css文件中使用text-overflow: ellipsis設(shè)置行尾顯示尾省略號，多行文本溢出：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
/* 指定顯示文本的行數(shù) */ overflow: hidden;
/* 超出隱藏 */5行以上（含5行）只顯示5行，超出部分省略號展示1.在js文件中，輸入文本內(nèi)容：
Page({
data: {
content:'
人要拿得起，也要放得下。
拿得起是生存，放得下是生活;
拿得起是能力，放得下是智慧。
有的人拿不起，也就無所謂放下;
有的人拿得起，卻放不下。
拿不起，就會一事無成;
放不下，就會疲憊不堪。
人生外在的一切最終絲毫也帶不走，晚放下不如早放下。
放下無謂的負(fù)擔(dān)，才能一路自在。
'
}
}
);
2.在css文件中使用text-overflow: ellipsis設(shè)置行尾顯示尾省略號，多行文本溢出：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
/* 指定顯示文本的行數(shù) */ overflow: hidden;
/* 超出隱藏 */ text-overflow: ellipsis;
/* 超出部分顯示省略號 */5行以上顯示展開按鈕點擊展開， 顯示全部內(nèi)容以及收起按鈕；點擊收起，折疊內(nèi)容并顯示展開按鈕，更多詳細(xì)內(nèi)容可在工具中導(dǎo)入代碼片段查看：
swanide://fragment/598981d541fda485a1715266effc213a1590053197948 。
1.在swan文件中輸入文本內(nèi)容，并設(shè)置按鈕：
hello，我是測試demo 悠悠竹林，萬頃翠色，幾多清幽和寧靜，自然沒有城市的喧囂和雜亂。
若有雨徐徐飄落，在綠綠的枝葉上騰起裊裊輕煙，如霧，如云，更似一幅水墨丹青，流芳沁馨，不知泊了誰的夢懷。
更醉人的是那動聽的雨聲，疏疏落落，瀟然成音成曲。
此時，雨為纖指竹為弦，清風(fēng)流韻，細(xì)彈心語，聽雨的人，便是知音。
{
{
isShow ? '
收起'
: '
展開'
}
}
2.在css文件中設(shè)置文本顯示行數(shù)：
.title {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 25rpx;
}
.title_txt {
font-size: 34rpx;
color: #2b2b2b;
}
.content {
text-indent: 2em;
height: auto;
overflow: hidden;
/* 超出隱藏 */ text-overflow: ellipsis;
/* 超出部分顯示省略號 */ display: -webkit-box;
-webkit-line-clamp: 5;
/* 指定顯示文本的行數(shù) */ -webkit-box-orient: vertical;
line-height: 30px;
/* 規(guī)定的行高 */ padding: 0 25rpx;
font-size: 30rpx;
color: #888;
}
.content.on {
display: block;
text-overflow: clip;
overflow: visible;
}
.btn {
text-align: center;
color: #333;
}
3.在 js文件中設(shè)置默認(rèn)收起狀態(tài)：
/** * 默認(rèn)收起狀態(tài)，isShow作為控制顯隱的開關(guān) * 點擊按鈕isShow的狀態(tài)值取反即可。
* 獲取行數(shù)的計算方式：
* 行數(shù) = 內(nèi)容高度/ 行高 */ Page({
data: {
isShow: false, lineNum: 5 }
, open() {
this.setData({
isShow: !this.data.isShow }
);
}
, onShow() {
const query = swan.createSelectorQuery();
query.select('
.content'
).boundingClientRect();
query.exec(res => {
const LineHeight = 30;
// 行高 const LineNum = res[0].height / LineHeight;
// 行數(shù) if (LineNum this.setData({
lineNum: LineNum }
);
}
}
);
}
}
);
推薦文章：
《PHP》《小程序開發(fā)》以上就是小程序文本溢出時，如何顯示為省略號？的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序本文轉(zhuǎn)載于：
juejin，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
怎樣阻止微信小程序自動打開？
下一篇：
小程序內(nèi)容更新提示小紅點如何實現(xiàn)？相關(guān)文章相關(guān)視頻公眾號能跟小程序重名嗎？小程序地圖怎么用？小程序與H5比較的區(qū)別一款小而美小程序腳手架，讓你更流暢快速的開發(fā)小程序小程序之picker 數(shù)據(jù)是 Object Arr...小程序文本溢出時，如何顯示為省略號？認(rèn)識小程序的目錄結(jié)構(gòu)小程序的rpx長度單位詳解布局奔牛課堂小程序搜素框小程序文檔 [溫州做小程序]