Текст кнопки плавает за пределами кнопки

У меня есть несколько кнопок, где текст находится наполовину и наполовину из кнопки. Он не распространяется по правой стороне кнопки, потому что он слишком длинный. Он просто разрезан пополам нижней горизонтальной границей кнопки.Текст кнопки плавает за пределами кнопки

Будучи новым для этого, я просто бросаю кухонную раковину на кнопку css, не зная, что она будет делать. Любая помощь оценивается.

color:yellow; 
background-color:aquamarine; 
height: 20px; 
width: 100px; 
border:none 0px transparent; 
font-size: 1px; 
float:right; 
overflow:visible; 
vertical-align:text-top; 
text-align:center; 
padding-top:65px; 
text-overflow: ellipsis;

источник

2017-02-18 Neddie

Вы пытались удалить высоту и ширину свойства css, которую вы установили? Вы не обязательно должны это делать. Пусть текст определяет ширину кнопки –

Спасибо за ответ. Я удалил их, и теперь текст находится внутри кнопки, но кнопка слишком большая. Я попытался сделать текст меньше, но даже если я сделаю текст XX маленькой синицы, сидит прямо в нижней части кнопки. Кажется, я наклоняю его вертикально. – Neddie

Возможно, ваш padding-top отвечает за это. Padding-top добавляет к высоте по умолчанию кнопки –

color:yellow; 
background-color:aquamarine; 
border:none 0px transparent; 
font-size: 1px; 
float:right; 
overflow:visible; 
vertical-align:text-top; 
text-align:center; 
padding-top:65px; 
text-overflow: ellipsis;

Нет необходимости для определения ширины или высоты, как он будет вырезать текст

источник

2017-02-18 20:09:59 Pulkit

<body> 
    <button id="btn"> 
    THIS IS A TEXT 
    </button> 
</body>

Для использования CSS это

#btn { 
    color:black; 
    background-color:aquamarine; 
    /*height: 20px; 
    width: 100px;*/ 
    border:none 0px transparent; 
    /*font-size: 1px;*/ 
    float:right; 
    overflow:visible; 
    vertical-align:text-top; 
    text-align:center; 
    padding: 10px; 
    /*padding-top:65px;*/ 
    text-overflow: ellipsis; 
}

Вы можете просто использовать padding недвижимость в одиночку, что добавляет четыре направления текста. font-size был слишком мал.

Отметьте here.

источник

2017-02-18 21:09:10

Спасибо. Но если я не включаю пределы высоты и ширины, кнопка становится слишком большой. – Neddie

Больше, чем в https://jsfiddle.net/1wqw358g/1/ –

Спасибо. Я отсортировал его, не используя высоту и ширину, но заполнение. Спасибо за вашу помощь. – Neddie

Текст кнопки плавает за пределами кнопки

ответ

Смежные вопросы