elementUI-输入框内容太长超出怎么搞

elementUI-输入框太长超出怎么搞

需求如下：

// methods中写个长度的方法，这里仅选中内容展示，不做其他选择下拉使用
ellipsis(value, length = 20) {
      if (!value) return "";
      if (value.length > length) {
        return value.slice(0, length) + "...";
      }
      return value;
}

意思是超出多少长度时，后面用 ... 代替即可；

当然如果不是输入框的话可以用过滤器来实现；

1、设置过滤器

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

2、使用过滤器

<el-table-column label="标题" width="150">
    <template slot-scope="scope">
       <span>{{ scope.row.title| ellipsis }}</span>
    </template>
  </el-table-column>

当然也可以使用样式限制内容超出后显示…

设置输入框宽度，然后加上下面的样式就可以；

.text-ellipsis{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}