1.页面部分
<el-row>
  <el-col :span="24">
    <div class="information-title">
     一行文字过多时，隐藏省略显示；一行文字过多时，隐藏省略显示；一行文字过多时，隐藏省略显示；
     一行文字过多时，隐藏省略显示；一行文字过多时，隐藏省略显示；一行文字过多时，隐藏省略显示；
     一行文字过多时，隐藏省略显示；一行文字过多时，隐藏省略显示；一行文字过多时，隐藏省略显示；
    </div>
  </el-col>
</el-row>
2.css样式部分
.information-title {
  color: #19d3ea;
  font-size: 18px;
  width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}

只是简单的理解，若有错误还望谅解指正！ 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue