Question

我有三个不同的div。它们的字体大小由jQuery bigtext生成。

如何动态扩展所有三种字体大小但对于每个相同的字体大小？因此，尽可能小的字体大小将应用于所有三个div。结果将与三个div的字体大小相同。

我目前的代码有效。但是所有文本都有不同的字体大小并放在同一页面上。这看起来不太好。

我的bigtext实现：

$(function() {
            $(window).on('resize', function() {
                  $(".competencesText").bigText({
                    horizontalAlign: "left",
                    verticalAlign: "top", 
                    textAlign: "left"
                  });
                  $(".competencesTextHeader").bigText({
                    horizontalAlign: "left",
                    verticalAlign: "top", 
                    textAlign: "left",
                  });
            });
                $(window).trigger('resize');    
            });

HTML

<div class="ThirdSectionTextArea">

              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
              </div>
              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
                  <div class="Row Row1 uppercase">
                      <div class="cell cell1">
                          <span class="competencesTextHeader">
                            Headline 
                          </span>
                      </div>
                       <div class="cell cell2">
                           <span class="competencesTextHeader">
                                Headline
                           </span>
                      </div>
                      <div class="cell cell3">
                          <span class="competencesTextHeader">
                                Headline
                          </span>
                      </div>
                  </div>
                  <div class="Row Row2">
                      <div class="cell cell1">
                           <table class="layoutTable"><tr><td class="centerDiv">
                               <div class="h_line">
                               </div>
                           </td></tr></table>
                      </div>
                       <div class="cell cell2">
                            <table class="layoutTable"><tr><td class="centerDiv">
                               <div class="h_line">
                               </div>
                           </td></tr></table>
                      </div>
                       <div class="cell cell3">
                            <table class="layoutTable"><tr><td class="centerDiv">
                               <div class="h_line">
                               </div>
                           </td></tr></table>
                      </div>
                  </div>
                  <div class="Row Row3">
                      <div class="cell cell1">
                          <span class="competencesText">
                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                          </span>
                      </div>
                       <div class="cell cell2">
                           <span class="competencesText">
                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                           </span>
                      </div>
                       <div class="cell cell3">
                           <span class="competencesText">
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                           </span>
                      </div>
                  </div>
              </div>
              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
              </div>

          </div>

直到现在，我所谈论的所有三个div都设置为“compesText”类。我是否必须为每个函数实现三个不同的函数，或者是否有另一种可能将所有字体都设置为相同的大小？

将相同的文本大小应用于两个不同的div

0 个答案: