Переполнение текста на элементе div

Я пытаюсь создать образец документа и хочу увеличить размер шрифта, если я нажму «Средний» & «Большая» кнопка.Переполнение текста на элементе div

Когда я нажимаю кнопку «средний», у меня нет проблем, но когда я нажимаю кнопку «большой», размер шрифта накладывается на другие div.

Вопрос 1. Почему текст перекрывается при увеличении размера шрифта?

<!DOCTYPE html> 
<html> 

    <head> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
     </script> 

     <script> 
      $(document).ready(function(){ 

       $("#switcher-medium").click(function(){ 
        alert('This is medium'); 
        //$('body').removeClass(); 
        $('body').addClass('medium'); 
       }); 

       $("#switcher-large").click(function(){ 
        alert('This is large'); 
        //$('body').removeClass(); 
        $('body').addClass('large'); 
       }); 

      }); 
     </script> 

     <style> 
      body{ 
       background-color:white; 
      } 

      #header-1st{ 
       height:30px; 
       width:70%; 
       float:left; 
      } 

      #switcher-control{ 
       height:30px; 
       width:30%; 
       float:left; 
      } 
      .medium{ 
       font-size: 1.5em; 
      } 

      .large{ 
       font-size: 2.5em; 
      } 

     </style> 

    </head> 

    <body> 

     <div id="main-container"> 
      <div id="header-1st"> 
      </div> 
      <div id="switcher-control"> 
      <button id="switcher-default"> 
       Default 
      </button> 
      <button id="switcher-medium"> 
       Medium 
      </button> 
      <button id="switcher-large"> 
       Large 
      </button> 
      </div> 
      <div id="content"> 
      This is a test page and you can increase the font-size by clicking the default, medium and large on top corner. 
      </div> 
     </div> 

    </body> 

</html>

источник

2014-01-14 user1050619

LIVE DEMO

Просто удалитеheight:30px; из ваших главных элементов

Это все, что вам нужно:

#header-1st{ 
    width:70%; 
    float:left; 
} 
#switcher-control{ 
    float:left; 
    width:30%; 
}

JS:

var sizes = [1, 1.5, 2.5]; 
$("#switcher-control button").click(function(){ 
    var i = $(this).index(); 
    $('body').css({fontSize: sizes[i]+"em"}); 
});

Для этого HTML

<div id="main-container"> 

    <div id="header-1st">HEADER</div> 
    <div id="switcher-control"> 
     <button>Default</button> 
     <button>Medium</button> 
     <button>Large</button> 
    </div> 

<div id="content"> 
     This is a test page and you can increase the font-size by clicking the default, medium and large on top corner. 
</div> 

</div>

источник

2014-01-14 02:46:52

Переполнение текста на элементе div

ответ

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