Я использую библиотеку BigText, чтобы добавить текст в div. Моя проблема в том, что дополнительный стиль, который я применил к тексту, переопределяется и игнорируется. Например, text-align: left больше не работает. И список точек не отображается. Как я могу получить функциональность скрипта и добавить класс CSS?

Я вызываю функцию bigText так:

jQuery:

$(function() {
    $(window).on('resize', function() { 
        $(".area_competences_text").bigText();
    });

    $(window).trigger('resize');    
});

HTML:

<div class="area_competences_text">    
    <ul>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li> 
    </ul>                               
</div>

CSS:

.area_competences_text {
    text-align: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}
2
jublikon 14 Дек 2015 в 14:53

6 ответов

Лучший ответ

Вы можете добавить! Важно

.area_competences_text {
    text-align: left !important;

} 
1
Mahendra Salve 14 Дек 2015 в 12:03

Вы можете сделать это без использования CSS, как показано ниже:

$(function() {
        $(window).on('resize', function() { 
            $(".area_competences_text").bigText();
            $(".area_competences_text").css("text-align","left")
                                       .css("padding","5%");
        });
            $(window).trigger('resize');    
        });
1
Atikur Rahman 14 Дек 2015 в 12:02

Я хотел бы добавить идентификатор или другой класс в div:

< Сильный > EX # 1

HTML

<div class="area_competences_text" id="my_id"> 

                                <ul>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li> 
                                </ul>  

</div>

CSS

#my_id {
    text-align: left !important;
    padding-top: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: 5% !important;
}

< Сильный > EX # 2

HTML

<div class="area_competences_text second_class"> 

                                <ul>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li> 
                                </ul>  

</div>

CSS

.area_competences_text.second_class {
    text-align: left !important;
    padding-top: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: 5% !important;
}

Когда вы добавляете ID или другой класс и ссылаетесь на оба класса, вы более точно знаете, что нужно стилизовать.

1
user2126478user2126478 14 Дек 2015 в 12:05

Вы можете добавить !important к настройке, чтобы не допустить ее переопределения:

.area_competences_text {
    text-align: left !important;
etc.
}
0
Johannes 14 Дек 2015 в 11:56

Вы можете использовать! Важно, как показано ниже:

.area_competences_text {
    text-align: left !important;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}
0
Vaibhav Patel 14 Дек 2015 в 11:56
<div class="area_competences_text" style="text-align: left !important;">
...
</div>
0
Abhirup 14 Дек 2015 в 12:21