移動端H5 文本超過一定行數(shù)顯示省略號,在省略號后面添加折疊按鈕

代碼如下:

<template>
  <div class="main">
    <div class="cont">
      <div class="basic-info">
        <div class="title">{{meetingInfo.meetingName}}</div>
        <div class="descript"
          :class="{fold: meetingInfo.introduce.length > 130 && isFold}">
          {{meetingInfo.introduce}}
          <span class="more no-fold"
            v-show="meetingInfo.introduce.length > 130 && isFold"
            @click="handleFold()"><i>...</i>查看全部</span>
          <span class="more"
            v-show="meetingInfo.introduce.length > 130 && !isFold"
            @click="handleFold()">收起全部</span>
        </div>
      </div>
      <div class="place-time">
        <ul class='basic-list'>
          <li class='basic-item'>
            <span class='item-icon address'></span>
            <span class='item-text'>{{meetingInfo.address}}</span>
          </li>
          <li class='basic-item'>
            <span class='item-icon time'></span>
            <span class='item-text time'>{{meetingInfo.meetingTime}}</span>
          </li>
        </ul>
        <div class="time-interval">
          <p class="text">10:30</p>
          <p class="icon-interval"></p>
          <p class="text">12:00</p>
        </div>
        <div class="btn"
          @click="onJump()">簽到</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isFold: true,
      meetingInfo: {
        meetingName: '這是一個很長很長很很長很長很的會議標題',
        introduce: '個人的生命都是一次單程的旅行绊起,不管你的路是長還是短腔彰,只要終點一到,所有生命以外的東西都得卸下世曾,不論是金錢財富缨恒,還是功名利祿,所有你昔日苦苦追求而來的都不會帶走一絲一毫轮听。個人的生命都是一次單程的旅行骗露,不管你的路是長還是短,只要終點一到血巍,所有生命以外的東西都得卸下萧锉,不論是金錢財富,還是功名利祿述寡,所有你昔日苦苦追求而來的都不會帶走一絲一毫柿隙。個人的生命都是一次單程的旅行叶洞,不管你的路是長還是短,只要終點一到禀崖,所有生命以外的東西都得卸下衩辟,不論是金錢財富,還是功名利祿帆焕,所有你昔日苦苦追求而來的都不會帶走一絲一毫惭婿。個人的生命都是一次單程的旅行,不管你的路是長還是短叶雹,只要終點一到财饥,所有生命以外的東西都得卸下,不論是金錢財富折晦,還是功名利祿钥星,所有你昔日苦苦追求而來的都不會帶走一絲一毫。個人的生命都是一次單程的旅行满着,不管你的路是長還是短谦炒,只要終點一到,所有生命以外的東西都得卸下风喇,不論是金錢財富宁改,還是功名利祿,所有你昔日苦苦追求而來的都不會帶走一絲一毫魂莫。個人的生命都是一次單程的旅行还蹲,不管你的路是長還是短,只要終點一到耙考,所有生命以外的東西都得卸下谜喊,不論是金錢財富,還是功名利祿倦始,所有你昔日苦苦追求而來的都不會帶走一絲一毫斗遏。',
        meetingTime: '2021年05月12日',
        address: '上海市徐匯區(qū)肇嘉浜路五洲國際大廈8樓801室',
        startTime: '10:30',
        endTime: '12:00'
      }
    }
  },
  methods: {
    onJump () {
      this.$router.push({ name: 'signResult' })
    },
    handleFold () {
      this.isFold = !this.isFold
    }
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  min-height 100vh
  background url('~assets/img/sign_bg@3x.png') no-repeat center top/ 100% auto
  padded_box(border-box,24px 12px)
  .cont
    width 100%
    background #fff
    border-radius 12px
    .basic-info
      width 100%
      padded_box(border-box,24px 12px)
      position relative
      &::after
        content ''
        display block
        width calc(100% - 26px)
        height: 1px;
        background-image: linear-gradient(to right, #eee 0%, #eee 50%, transparent 50%);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        position absolute
        bottom 0
        left 50%
        transform translate(-50%, 0)
      .title
        width 100%
        height 22px
        line-height 22px
        font-size 16px
        font-weight 700
        color #333
        noWrap()
      .descript
        line-height 20px
        font-size 14px
        color #666666
        margin-top 8px
        position relative
        &.fold
          height 100px
          ellipsis(5)
        .more
          float right
          line-height 20px
          font-size 12px
          color #0080ff
          &.no-fold
            float none
            display inline-block
            background #fff
            position absolute
            right 0
            bottom -1px
            i
              font-size 14px
              color #666
              margin-right 12px
    .place-time
      width 100%
      padded_box(border-box,24px 10px 40px)
      .basic-list
        padded_box(border-box,0 2px)
        .basic-item
          display flex
          align-items center
          & + .basic-item
            margin-top 12px
          .item-icon
            flex none
            width 16px
            height 16px
            margin-right 6px
            bgCover()
            &.time
              background-image url('~assets/img/icon_time@3x.png')
            &.address
              background-image url('~assets/img/icon_location@3x.png')
          .item-text
            width calc(100% - 22px)
            height 20px
            font-size: 14px;
            color: #666666;
            line-height: 20px
            noWrap()
            &.time
              font-size 16px
      .time-interval
        width 100%
        display flex
        justify-content center
        align-items center
        margin-top 4px
        .text
          line-height 56px
          font-size 40px
          font-weight 700
          color #333
        .icon-interval
          width 40px
          height 40px
          background url('~assets/img/icon_to@3x.png') no-repeat center / 100%
          margin 0 24px
      .btn
        width 100%
        height 42px
        background #0080FF
        line-height 42px
        text-align center
        font-size 14px
        color #fff
        border-radius 21px
        margin-top 32px
</style>

效果圖如下:


image.png

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市鞋邑,隨后出現(xiàn)的幾起案子诵次,更是在濱河造成了極大的恐慌,老刑警劉巖枚碗,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件藻懒,死亡現(xiàn)場離奇詭異,居然都是意外死亡视译,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門归敬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來酷含,“玉大人鄙早,你說我怎么就攤上這事∫窝牵” “怎么了限番?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長呀舔。 經(jīng)常有香客問我弥虐,道長,這世上最難降的妖魔是什么媚赖? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任霜瘪,我火速辦了婚禮,結(jié)果婚禮上惧磺,老公的妹妹穿的比我還像新娘颖对。我一直安慰自己,他們只是感情好磨隘,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布缤底。 她就那樣靜靜地躺著,像睡著了一般番捂。 火紅的嫁衣襯著肌膚如雪个唧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天设预,我揣著相機與錄音徙歼,去河邊找鬼。 笑死絮缅,一個胖子當著我的面吹牛鲁沥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播耕魄,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼画恰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吸奴?” 一聲冷哼從身側(cè)響起允扇,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎则奥,沒想到半個月后考润,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡读处,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年糊治,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罚舱。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡井辜,死狀恐怖绎谦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情粥脚,我是刑警寧澤窃肠,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站刷允,受9級特大地震影響冤留,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜树灶,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一纤怒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧破托,春花似錦肪跋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至萝映,卻和暖如春吴叶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背序臂。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工蚌卤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人奥秆。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓逊彭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親构订。 傳聞我的和親對象是個殘疾皇子侮叮,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容