Предотвратить выпадение текста кнопки при изменении размера браузера

0

Я стараюсь, чтобы текст кнопки не перекрывался при малом размере окна. Я использовал тег <button> вместо <input>, чтобы разрешить две строки текста, однако при изменении размера окна текст кнопки истекает из области "кнопка".

Я попытался настроить размер кнопки, изменив свойство "fixed:", изменив свойство "inline:", но безрезультатно. Некоторые вещи, которые я пробовал:

Какая кнопка должна выглядеть так:

Изображение 174551

Что делает кнопка при изменении размера окна:

Изображение 174551

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>

Любые предложения оставить текст кнопки в области кнопок, независимо от размера окна?

  • 0
    Возможно, попробуйте добавить следующий CSS: font-size: some% наряду с text-size: largest .
  • 1
    Вы смотрели на min-width или min-height и max-height ?
Теги:
button
resize

2 ответа

0 
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;       
}
Поделиться
0

Попробуйте определить 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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню