el-form-item的label内容超出两行溢出隐藏

你可以使用 CSS 的 `text-overflow` 属性来实现 label 内容超出两行溢出隐藏。

首先，给 el-form-item 设置一个固定的高度，比如：

<el-form-item label="这是一个很长很长的标签名字" style="height: 40px;">
  <el-input></el-input>
</el-form-item>

然后，在 label 的样式中添加以下属性：

.el-form-item__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

其中，`-webkit-box` 属性会将文本包裹在多个行内框中，`-webkit-line-clamp` 属性限制文本显示的行数，`-webkit-box-orient` 属性设置文本排列方向为垂直方向，`overflow` 属性设置文本溢出隐藏，`text-overflow` 属性设置文本溢出时的省略号显示。

这样，label 内容超出两行时就会自动隐藏并显示省略号。

相关问题

el-form-item超出隐藏

根据您提供的引用内容，要实现el-form-item超出隐藏，您可以使用el-tooltip组件来包裹label，并通过计算label的长度是否溢出来控制el-tooltip的显示与隐藏。具体的代码示例如下：

<el-form-item v-bind="customAttrs" class="ts-font-14 ts-form-item" :class="{'inline-full-width':inlineFullWidth}">
  <template slot="label">
    <el-tooltip :content="customAttrs.label" placement="top" :disabled="isShowTooltip">
      <span @mouseenter="visibleTooltip">{{customAttrs.label}}</span>
    </el-tooltip>
  </template>
  <slot></slot>
</el-form-item>

在样式部分，您可以为.el-form-item__label设置一些属性来实现超出隐藏的效果：

.ts-form-item .el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在js部分，您可以使用visibleTooltip方法来计算label的长度是否溢出，从而控制isShowTooltip的值：

visibleTooltip(e) {
  this.isShowTooltip = e.target.offsetWidth - e.fromElement.clientWidth > 0 ? false : true;
  // 18为required *号引起的偏差。
}

请注意，上述代码是基于Element UI进行二次封装的组件，您可以根据实际情况进行相应的调整。

el-form-item中的label过长导致换行

可以通过设置el-form-item的label-width属性来控制label的宽度，从而避免label过长导致换行的问题。如果label的内容过长，可以使用CSS的text-overflow属性来控制文本的溢出效果，例如使用ellipsis来表示省略号。具体实现方法如下：

<el-form :label-width="100px">
  <el-form-item label="这是一个很长很长很长很长很长很长很长很长很长很长的label">
    <span class="label-text">这是label的内容</span>
  </el-form-item>
</el-form>

.el-form-item__label {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示溢出部分 */
}
.label-text {
  /* 其他样式 */
}