Как убрать отступы по бокам текста в кнопке с помощью css?

Question

[Сергей Быковский]

Нужно убрать в этой конкретной кнопке отступы перед и после текста, что бы текст вмещался. Пока что то ничего не получается. Возможно потому, что на кнопку действуют смежные css стили. Которые не хотелось бы менять. Ещё нельзя изменять width и margin. Есть ли способ убрать эти отступы?

Comments

[SergejDudn]

Добавьте min-width, если width нельзя изменить, а почему нельзя изменять?
Но лучше конечно отступы уменьшить, тоже нельзя?

[Сергей Быковский]

А необходимо было сделать кнопку такой же ширины как поля самой формы
попробую min-width спасибо

Answer 1

[Andrew]

Отличный вопрос :-D
Можно хотя бы стили кнопки?
Если там width задан строго - уменьшай размер шрифта.
Если есть padding - играйся с ним, но при padding'е - второе слово бы перенеслось на вторую строку.

Comments

[Сергей Быковский]

.form-ro {
padding-right: 3px;
width: 70%;
box-sizing: border-box;
}

.wpcf7-submit {
background: #79b24b;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}

.btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
padding: 15px 37.5px;
}

Видимо вот это всё сразу на неё действует)

[Andrew]

gorodska3ka, в общем, второе значение(здесь) в padding'e - как раз отступы от текста, уменьшайте его, мб что-то и получится.

padding: 15px 37.5px;
в
padding: 10px;

[Сергей Быковский]

Andrew, спасибо, сработало, правда теперь я запутался с шириной, но это уже другая история))

Answer 2

[Gortyser]

Так как гадальный шар пока не настроен, то могу предположить, что у блока фиксированная ширина, а текст обрубается из-за css-свойства text-overflow: ellipsis либо каким-нибудь плагином с аналогичным действием вроде trunk8.