不使用输入标记值属性的坏词CSS属性。

Question

我试图在页面上创建一个具有有限宽度的按钮。

问题是，当文本溢出有限的宽度，它是隐藏的。因此，我试图打破文本显示所有的文本在相同的宽度。

我尝试了以下CSS属性，但都没有效果：

• word-break: break-word;
• overflow-wrap: break-word;
• word-wrap: break-word;
• white-space:nowrap;

所有这些属性在div标记中都能很好地工作，但对于input标记则不起作用。

​

input { 
  display: block;
  color: #fff;
  background: #000;
  width: 100px;
  text-align: center;
  border: 0;
  border-radius: 25px;
  padding: 10px;
  margin: 10px auto;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  white-space: no-wrap;
} 

<input type="button" value="Select All Content Boxes"> 

​

Answer 1

你想要使用white-space: normal;

空白的

序列将折叠成一个空白。必要时，文本将被包装。

​

input { 
 display: block;
 color: #fff;
 background: #000;
 width: 100px;
 text-align: center;
 border: 0;
 border-radius: 25px;
 padding: 10px;
 margin: 10px auto;
 white-space: normal;
} 

<input type="button" value="Select All Content Boxes"> 

​