限制 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

.btn { 
display: inline-block;
font-size: 12px;
background: #53A2FF;
border: 2px solid transparent;
color: #eee;
font-weight: bold;
padding: 3px 2px;
width: 250px;
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;
}

试试这个，如果它适合你..通过 width 属性，你可以在 css

中指定你的按钮的宽度

Answer 2

您使用 max-width 的方法是正确的，但您还需要 1) 使用 white-space 确保文本不换行，以及 2) 使用 white-space 隐藏多余的字符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>

限制 CSS 中按钮的宽度

Limit Width Of The Buttons In CSS

css

button

limit

width