JSFiddle Example

Question

我试图阻止按钮文本在小窗口大小上重叠。我使用了＆lt; button＆gt;标签而不是＆lt; input＆gt;允许两行文本，但是当窗口重新调整大小时，按钮文本会从“按钮”区域流出。

我试过调整按钮大小，更改“fixed：”属性，更改“inline：”属性，但无济于事。我试过的一些事情：

应该是什么样的按钮：

重新调整窗口大小时按钮的作用：

CSS：

.button2 {
  -moz-box-shadow:inset 0px 1px 0px 0px #d4eaff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #d4eaff;
  box-shadow:inset 0px 1px 0px 0px #d4eaff;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,
        #0066FF), color-stop(1, #0052CC));
  background:-moz-linear-gradient(top, #0066FF 5%, #0052CC 100%);
  background:-webkit-linear-gradient(top, #0066FF 5%, #0052CC 100%);
  background:-o-linear-gradient(top, #0066FF 5%, #0052CC 100%);
  background:-ms-linear-gradient(top, #0066FF 5%, #0052CC 100%);
  background:linear-gradient(to bottom, #0066FF 5%, #0052CC 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF',
        endColorstr='#0052CC',GradientType=0);
  background-color:#0066FF;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #6692bd;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:23px;
  font-weight:normal;
  width:100%;
  height: 44px;
  text-decoration:none;
  text-shadow:-1px 1px 0-1px #488ccf;
}

HTML：

<table width="95%" align="center">
  <tr>
    <td text align="center">
      <a href="https://www.example.com">
        <button class="button">Order Now</button>
      </a>
    </td>
  </tr>
</table>

是否有任何建议将按钮文字保留在按钮区域内，无论窗口大小如何？

Answer 1

尝试定义min-width和word-wrap。您还建立了button2而非button

的风格

.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #d4eaff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #d4eaff;
    box-shadow:inset 0px 1px 0px 0px #d4eaff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0066FF), color-stop(1, #0052CC));
    background:-moz-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:-webkit-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:-o-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:-ms-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:linear-gradient(to bottom, #0066FF 5%, #0052CC 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0052CC', GradientType=0);
    background-color:#0066FF;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #6692bd;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:23px;
    font-weight:normal;
    text-decoration:none;
    text-shadow:-1px 1px 0-1px #488ccf;
    width: 150px;
    height: 44px;
    min-width: 150px;
    min-height: 44px;
    word-wrap: nowrap;
}

JSFiddle Example

Answer 2

Using Padding instead of height and width

.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #d4eaff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #d4eaff;
    box-shadow:inset 0px 1px 0px 0px #d4eaff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0066FF), color-stop(1, #0052CC));
    background:-moz-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:-webkit-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:-o-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:-ms-linear-gradient(top, #0066FF 5%, #0052CC 100%);
    background:linear-gradient(to bottom, #0066FF 5%, #0052CC 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0052CC', GradientType=0);
    background-color:#0066FF;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #6692bd;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:23px;
    font-weight:normal;
    text-decoration:none;
    text-shadow:-1px 1px 0-1px #488ccf;
    padding:5px;       
}

防止按钮文本在浏览器调整大小时流出

2 个答案:

JSFiddle Example