CSS - шрифт скрывается в кнопке при изменении размера окна браузера

Question

CSS - шрифт скрывается в кнопке при изменении размера окна браузера

0

CSS

   #category{
    width: 85%;
    height: 65%;
    //border: thin darkgray solid;
    margin: 0 auto;
    margin-top: 2%;
    bottom: 0;
}
    .interest_categories{

        width: 21%;
        height: 15%;
        border: thin darkgrey solid;
        margin-left:10px ;
        margin-top: 10px;
        float: left;
    }

    .interest_categories input{
        width: 100%;
        height: 100%;
        font-size: 1em;
        text-align: center;
        vertical-align: middle;
    }

HTML

<div id="category" style="width: 96%; margin-top: 5px; height: 75%; top: 0; border: thin red solid;">
            <div class="interest_categories">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="design_art" value="Design & Art"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="photography" value="Photography"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="science" value="Science"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="it" value="IT"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="technology" value="Technology"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="business" value="Business"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="entrepreneurship" value="Entrepreneurship"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="sports" value="Sports"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="games" value="Games"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="psychology" value="Psychology"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button"  id="humor" value="Humor"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="travel" value="Travel"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="nature" value="Nature"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="food_drink" value="Food & Drink"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="fashion" value="Fashion"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="history" value="History"  style="color: #a1a1a1; background: white;">
            </div>

        </div><!--Category-->

Вот он, я хочу, чтобы мой шрифт не скрывался даже при изменении размера моего окна. когда я изменяю размер окна браузера, шрифты скрываются, как показано на изображении. поэтому я хочу сделать это, когда меняю размер моего окна, тогда categories должны соответствовать должным образом.

Bhavin Shah 03 авг. 2016, в 14:37

Источник

0

Вы не можете сделать это .. текст не регулируется по размеру элемента . Вам понадобится JavaScript.
Paulie_D 03 авг. 2016, в 11:46
0

я могу использовать font-size-Adjust? но это только для firefox. или есть ли способ, которым я могу положить дополнительный текст в кнопку.?
Bhavin Shah 03 авг. 2016, в 11:53
0

пожалуйста, дайте мне свой полный код?
Mr. Perfectionist 03 авг. 2016, в 11:56
0

@ Черная птица ... дано
Bhavin Shah 03 авг. 2016, в 12:00
0

Это не то, что делает font-size-adjust .
Paulie_D 03 авг. 2016, в 12:05
0

хорошо .. тогда есть ли другой способ сделать это?
Bhavin Shah 03 авг. 2016, в 12:08
0

Нет ... ваши кнопки имеют фиксированный размер, как и текст ... вы не можете получить такое же количество текста в меньшем поле ... оно просто не поместится.
Paulie_D 03 авг. 2016, в 12:22

Показать ещё 5 комментариев

Теги:

twitter-bootstrap

css

resize

responsive-design

1 ответ

Ещё вопросы

Вы не можете сделать это .. текст не регулируется по размеру элемента . Вам понадобится JavaScript.
я могу использовать font-size-Adjust? но это только для firefox. или есть ли способ, которым я могу положить дополнительный текст в кнопку.?
пожалуйста, дайте мне свой полный код?
хорошо .. тогда есть ли другой способ сделать это?
Нет ... ваши кнопки имеют фиксированный размер, как и текст ... вы не можете получить такое же количество текста в меньшем поле ... оно просто не поместится.

Mr. Perfectionist · Accepted Answer · 2016-08-03T14-27-00.000Z

На самом деле вы не использовали Bootstrap. Вы должны разделить каждую row в четырех подразделениях.

3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3

Вы ничего не зафиксировали в Bootstrap. Я отредактировал ваш код с помощью Bootstrap. Может быть, это не 100% вашего ответа, но я думаю, вы сможете переделать его своими знаниями.

<div class="container" id="category" style="top: 0; border: thin red solid;">
  <div class="row">
    <div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
    </div>


   <div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>


<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>

<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>


<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>

     </div>        
</div>

CSS:

 #category{
    //border: thin darkgray solid;
    margin: 0 auto;
    margin-top: 2%;
    bottom: 0;
}
    .interest_categories{

        border: thin darkgrey solid;
        float: left;
    }

    .interest_categories input
    {
        text-align: center;
    }