输入元素溢出容器[重复]答案

【问题标题】：Input element overflows the container [duplicate]输入元素溢出容器[重复]
【发布时间】：2020-01-19 05:34:57
【问题描述】：

文本太长时输入溢出父容器。

我正在研究如何将文本包装在元素内。我尝试了word-break、text-wrap，但没有任何效果。

    <div>
      <input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
    </div>

【问题讨论】：

是的，更改按钮文本
可能输入有一个padding-left？
您能展示一下您目前拥有的 CSS 吗？

标签： html css list

【解决方案1】：

white-space:normal 似乎在 Chrome、Firefox、IE 和 Edge 中运行良好……

div { width: 400px; }
input[type=submit] { white-space:normal; }

<div>
  <input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
</div>

【讨论】：

我需要所有文本都可见。添加 `white-space:normal;` 成功了！非常感谢！

【解决方案2】：

只需在按钮上指定max-width：

.submit {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  width: 300px;
}

<div class="container">
  <input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text" />
</div>

请注意，您还可以使用 text-overflow 属性设置溢出样式。

【讨论】：