欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)

 更新時(shí)間：2023年10月24日 09:19:50   作者：橘哥哥  
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue elementUI當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)

如圖，當(dāng)渲染的文字超出30字后顯示省略號(hào)

設(shè)置過(guò)濾器

filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    }
  },

使用過(guò)濾器

<el-table-column label="題干" width="600">
        <template slot-scope="scope">
          <span>{{scope.row.content | ellipsis}}</span>
        </template>
      </el-table-column>

ok了~

vue elementui文本超出字?jǐn)?shù)時(shí)顯示省略號(hào)且鼠標(biāo)懸停時(shí)顯示省略全部信息

省略單行

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

省略多行

word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;//控制行數(shù)
-webkit-box-orient: vertical;

鼠標(biāo)懸停時(shí)顯示省略全部信息

利用title屬性，在代碼中如下：

<div class="moduletitle" :title="titletest">{{ titletest }}</div>
 
data() {
    return {
      titletest: "測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試",
    }
   }

具體實(shí)現(xiàn)效果如下：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論