无法使 CSS 自动换行：断词工作

Question

我遇到一个问题，当浏览器宽度小于显示在一行上的按钮时，宽格式按钮不会换行到下一行。

HTML:

<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">

CSS:

body {font-size: 16px;}
.gform_button.button {
  background-color: #E96E39;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  hyphens: auto;
  word-wrap: break-word;
  box-sizing: content-box;
  font-size: 1em;
  color: #FFF;
  font-weight: 700;
  letter-spacing: 0.046875em;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
  max-width: 100%;
}

如何让按钮换行到下一行，并且最多为视口宽度的 100%？

谢谢。

Answer 1

只需将这一行 css 添加到您的输入中 button class:

white-space: normal;

body {
  max-width: 300px; // just to show the result
  font-size: 16px;
}

.gform_button.button {
  background-color: #E96E39;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  hyphens: auto;
  word-wrap: break-word;
  box-sizing: content-box;
  font-size: 1em;
  color: #FFF;
  font-weight: 700;
  letter-spacing: 0.046875em;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
  max-width: 100%;
  white-space: normal;
}

<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">

Answer 2

这是一个 <input> 标签，你不能做你想要的，但你可以将标签更改为 <button> 并且它有效（你不需要 word-wrap因为它是默认值):

https://jsfiddle.net/vqmo9ykg/8/

body {font-size: 16px;}
.gform_button.button {
 background-color: #E96E39;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 hyphens: auto;
 box-sizing: content-box;
    font-size: 1em;
    color: #FFF;
    font-weight: 700;
    max-width: 200px;
  letter-spacing: 0.046875em;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
}

<button type="submit" class="gform_button button" id="gform_submit_button_1" tabindex="26" >Help me develop better solutions for small business</button>

Answer 3

将宽度设置为 100%，将最大宽度设置为按钮的宽度。

无法使 CSS 自动换行：断词工作

can't make CSS word-wrap: break-word work

css

word-wrap