css - 限制CSS中按钮的宽度

Question

CSS:

.btn { 
background: #53A2FF;
border: 2px solid transparent;
color: #eee;
font-weight: bold;
padding: 9px 15px;
outline: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.btn:hover { 
border: 2px solid #000;
background: transparent;
color: #000;
}   

HTML:

<button class="btn">Hello Over There!</button>
<br><br>
<button class="btn">This Button Has Too Much Text, That's Why It Is Bigger!</button>
<br><br>
<button class="btn">Hello Over There! This Is The Third Button!</button>

输出类似于:

每个按钮的大小取决于字母的数量。

如果我更改 HTML 并执行类似的操作。

<input class="btn" value="Hello Over There!">
<br><br>
<input class="btn" value="This Button Has Too Much Text, That's Why It Is Bigger!">
<br><br>
<input class="btn" value="Hello Over There! This Is The Third Button!">

所以输出将类似于:

每个按钮的大小将相同。但是 input 标签主要用于 HTML 表单，使用它们来制作链接根本不是一个好主意!

我尝试使用 CSS max-width: 来做到这一点，但按钮内的文本开始溢出。

如果我想使用button标签代替input标签，并且如果我想限制按钮的宽度，那么我应该使用哪个CSS代码呢？

在使用 button 标签时，我确实想要 input 标签的相同输出。

Answer 1

max-width 是正确的，但您还需要 1) 使用 white-space 确保文本不换行，和 2) 使用 overflow 隐藏无关字符。

.btn {
  background: #53A2FF;
  border: 2px solid transparent;
  color: #eee;
  font-weight: bold;
  padding: 9px 15px;
  outline: none;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  /* so these are new: */
  max-width:20em;
  white-space:nowrap;
  overflow:hidden;
}

.btn:hover {
  border: 2px solid #000;
  background: transparent;
  color: #000;
}

<button class="btn">Hello Over There!</button>
<br><br>
<button class="btn">This Button Has Too Much Text, That's Why It Is Bigger!</button>
<br><br>
<button class="btn">Hello Over There! This Is The Third Button!</button>