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

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

本文转载自这里，主要用于自己记录学习。

css方法

在对应的p,span标签添加如下样式

  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>