【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序文本溢出時(shí)我很忙顯示為省略號(hào)

【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序文本溢出時(shí)我很忙顯示為省略號(hào)？

這篇文章給大家分享的是有關(guān)小程序文本溢出時(shí)我很忙顯示為省略號(hào)？的內(nèi)容。在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨在下過來看看吧。本文介紹在百度智能小程序開發(fā)中，如何將溢出的文本顯示為省略號(hào)。目前在移動(dòng)端開發(fā)的展示界面中，如果一段文本的數(shù)量過長(zhǎng)，受限于屏幕的寬高等因素，有可能不能完全顯示，為了提高用戶的使用體驗(yàn)，這個(gè)時(shí)候就需要我們把溢出的文本顯示成省略號(hào)。接下來我們來看一下對(duì)于下面這一段文本內(nèi)容，我們可以如何實(shí)現(xiàn)行文本溢出的樣式吧：?jiǎn)涡形谋疽绯龆嘈形谋疽绯觯?行以下的內(nèi)容全顯示；5行以上（含5行）只顯示5行，超出部分省略號(hào)展示；5行以上顯示展開按鈕。點(diǎn)擊展開，顯示全部?jī)?nèi)容以及收起按鈕；點(diǎn)擊收起，折疊內(nèi)容并顯示展開按鈕。悠悠竹林，萬(wàn)頃翠色，幾多清幽和寧?kù)o，自然沒有城市的喧囂和雜亂。若有雨徐徐飄落，在綠綠的枝葉上騰起裊裊輕煙，如霧，如云，更似一幅水墨丹青，流芳沁馨，不知泊了誰(shuí)的夢(mèng)懷。更醉人的是那動(dòng)聽的雨聲，疏疏落落，瀟然成音成曲。此時(shí)，雨為纖指竹為弦，清風(fēng)流韻，細(xì)彈心語(yǔ)，聽雨的人，便是知音。悠悠竹林，萬(wàn)頃翠色，幾多清幽和寧?kù)o，自然沒有城市的喧囂和雜亂。若有雨徐徐飄落，在綠綠的枝葉上騰起裊裊輕煙，如霧，如云，更似一幅水墨丹青，流芳沁馨，不知泊了誰(shuí)的夢(mèng)懷。更醉人的是那動(dòng)聽的雨聲，疏疏落落，瀟然成音成曲。此時(shí)，雨為纖指竹為弦，清風(fēng)流韻，細(xì)彈心語(yǔ)，聽雨的人，便是知音。單行文本溢出1.在js文件中，輸入文本內(nèi)容：Page({

data:

{

content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就無所謂放下;有的人拿得起，卻放不下。拿不起，就會(huì)一事無成;放不下，就會(huì)疲憊不堪。人生外在的一切最終絲毫也帶不走，晚放下不如早放下。放下無謂的負(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:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就無所謂放下;有的人拿得起，卻放不下。拿不起，就會(huì)一事無成;放不下，就會(huì)疲憊不堪。人生外在的一切最終絲毫也帶不走，晚放下不如早放下。放下無謂的負(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:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就無所謂放下;有的人拿得起，卻放不下。拿不起，就會(huì)一事無成;放不下，就會(huì)疲憊不堪。人生外在的一切最終絲毫也帶不走，晚放下不如早放下。放下無謂的負(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行以上顯示展開按鈕點(diǎn)擊展開，顯示全部?jī)?nèi)容以及收起按鈕；點(diǎn)擊收起，折疊內(nèi)容并顯示展開按鈕，更多詳細(xì)內(nèi)容可在工具中導(dǎo)入代碼片段查看：swanide://fragment/598981d541fda485a1715266effc213a1590053197948。1.在swan文件中輸入文本內(nèi)容，并設(shè)置按鈕：<view

class="container">

<view

class="title">

<text

class="title_txt">hello，我是測(cè)試demo</text>

</view>

<view

class="content

{{isShow

?

'on'

:

''}}">

悠悠竹林，萬(wàn)頃翠色，幾多清幽和寧?kù)o，自然沒有城市的喧囂和雜亂。若有雨徐徐飄落，在綠綠的枝葉上騰起裊裊輕煙，如霧，如云，更似一幅水墨丹青，流芳沁馨，不知泊了誰(shuí)的夢(mèng)懷。更醉人的是那動(dòng)聽的雨聲，疏疏落落，瀟然成音成曲。此時(shí)，雨為纖指竹為弦，清風(fēng)流韻，細(xì)彈心語(yǔ)，聽雨的人，便是知音。

</view>

<block

s-if="{{lineNum

>

4}}">

<view

class="btn"

bindtap="open">{{isShow

?

'收起'

:

'展開'}}</view>

</block>

</view>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;

/*

超出部分顯示省略號(hào)

*/

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)

*

點(diǎn)擊按鈕isShow的狀態(tài)值取反即可。

*

獲取行數(shù)的計(jì)算方式：

*

行數(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

<

5)

{

this.setD