el-input输入框超出显示

如果 `el-input` 输入框超出显示，可能是由于以下原因：

1. 输入框宽度设置过大，超出了容器宽度；
2. 输入框内部包含的内容过多，导致输入框高度超出了容器高度；
3. 输入框的样式设置不当，导致出现溢出问题。

解决方法如下：

1. 检查输入框的宽度设置是否超出了父容器的宽度，可以通过设置 `max-width` 属性来限制输入框的宽度；
2. 检查输入框内部的内容是否过多，可以通过设置 `max-height` 和 `overflow` 属性来限制输入框的高度和滚动条的显示；
3. 检查输入框的样式设置是否正确，可以通过调整样式来解决溢出问题，例如设置 `padding` 或 `margin` 属性等。

如果以上方法无法解决问题，可以尝试使用浏览器的开发者工具来进行调试，查看元素的样式属性和布局情况。

相关问题

el-input 输入框默认输入内容过长 溢出隐藏 鼠标悬停加上出现悬浮框显示完整内容

您可以使用 CSS 样式来实现这个效果。具体实现步骤如下：

1. 首先给 el-input 输入框设置一个固定的宽度和高度，并设置 overflow: hidden; 让超出部分隐藏。

2. 当鼠标悬停在输入框上时，使用 CSS 选择器 :hover 来显示一个悬浮框，并将悬浮框的内容设置为输入框中的完整内容。

下面是示例代码：

HTML 代码：

<el-input class="input" v-model="inputValue"></el-input>

CSS 代码：

.input {
  width: 200px; /* 设置宽度 */
  height: 20px; /* 设置高度 */
  overflow: hidden; /* 超出部分隐藏 */
}

.input:hover {
  position: relative;
}

.input:hover::before {
  content: attr(value); /* 显示完整内容 */
  position: absolute;
  top: -30px; /* 位置调整 */
  left: 0;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  z-index: 999;
}

注意：代码中的 value 是 el-input 的一个属性，用于获取输入框中的值。如果使用其他框架或者纯 HTML 实现，请根据具体情况修改代码。

element-ui el-form中el-input 内容超出input宽度自动换行展示

Element UI 的 `el-form` 中的 `el-input` 元素默认不会自动换行显示文本内容，如果输入的内容长度超过了输入框的宽度，它会通过省略号 (`...`) 显示剩余部分。如果你想让内容在宽度超限时自动换行，你需要自定义样式或者使用一些第三方库。

你可以通过 CSS 来控制这个行为，例如给 `el-input` 设置一个 `white-space: pre-wrap;` 或者 `word-wrap: break-word;` 属性，这会让文本在需要的时候换行。下面是一个简单的例子：

.el-form__inline .el-input {
  white-space: pre-wrap; /* 或者 word-wrap: break-word; */
}

如果你在项目中直接使用 Vue.js，也可以在组件的 `style` 标签或者 scoped CSS 中添加这个规则。

不过请注意，这不是 Element UI 的内置功能，而是通过修改元素的CSS样式实现的。如果需求频繁，可能需要考虑是否适合所有场景，因为不是所有的浏览器都支持这样的CSS特性。