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

Posted 2023-02-22

【中文标题】输入元素溢出容器[重复]

【英文标题】：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 吗？

【参考方案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 属性设置溢出样式。