平常设计中,假如文章标题超过多做,我希望发生句号,而且向其加

平常设计中，假如文章标题超过多做，我希望发生句号，而且向其加上简易提醒。可是，如果我们在全局性写公共性class类，个数不太好操纵。假如统一加title=xxx，又会有文字是不是超过都会发生title的情况。

我们可以利用vue里的自定命令，非常方便完成多做文字外溢和简单提醒效果。

// 下列编码能直接黏贴进自已的`.vue`文档中查询实际效果
<template>
  <div class="parent">
    <h3>文章标题</h3>
    <div class="child" v-ellipsis="3">
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:
        "好雨知时节，当春乃发生。随风潜入夜，润物无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。",
    };
  },
  directives: {
    ellipsis: {
      inserted: function (el, binding) {
        // 获得期待的文字个数，默认1
        const n = binding.value || 1;
        // （1）完成超过n行是句号
        el.style.display = "-webkit-box";
        el.style.webkitBoxOrient = "vertical";
        el.style.webkitLineClamp = n;
        el.style.overflow = "hidden";
        // （2）完成鼠标移入在外溢前提下才会有提示文案
        if (el.clientHeight < el.scrollHeight) {
          el.title = el.innerHTML;
        }
      },
    },
  },
};
</script>

<style>
.parent {
  display: flex;
  align-items: center;
  width: 200px;
  font-size: 12px;
  border: 1px solid #aaa;
}
h3 {
  margin-right: 4px;
  white-space: nowrap;
}
</style>

多做使用方法：

<div class="child" v-ellipsis="3">
  {{ msg }}
</div>

这时，假如超过3行，就容易出现...和title提示文案。

v-ellipsis='3'就能实现句号和超过期待个数后title提醒作用。

单行道使用方法：

<div class="child" v-ellipsis>
  {{ msg }}
</div>

单行道状况能够省去个数，假如超过单行道就容易出现...和title的提示文案。

v-ellipsis就能实现单行道外溢而且发生title提醒效果。

结语

假如有效，还记得给我点个赞支持一下吆~