前端页面标题、p、span等标签限制显示的文字数量

前端页面标题、p、span等标签限制显示的文字数量

一、css样式

在相应的h、p、span等标签的css样式中加入下列样式

  display: block; /* 当前元素本身是inline的，因此需要设置成block模式 */
  white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
  overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
  text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */

文字不超过你设置的长度，超过即变为。。。

二、设置filter

export default {
  name: "",
  // 显示字段超出相应长度后截取 可设置多个
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
    ellipsisTitle(value) {
      if (!value) return "";
      if (value.length > 15) {
      // 截取长度
        return value.slice(0, 15) + "...";
      }
      return value;
    },
  },
 }

使用

<p>
   {{ content | ellipsis }} //content为你对应的内容
   {{ content | ellipsisTitle }} //content为你对应的内容
</p>