текст выходит за границы колонки

452

29 марта 2017, 14:49

Добрый день! Помогите, пожалуйста, найти и исправить ошибку. Только начинаю осваивать верстку бутстрап. Почему-то текст не распределяется внутри столбца, хотя внутренние границы есть.

<div class=row>
 <div class=col-md-8><h1>sdfkgjsdlfkhdf</h1>
  <p>skjhfksjdhfksjhdfksjhdfksjdhfksjhdfkjshdfkjsdhfksjdhfksjdhfksjdhfsfsdfsdfsdfsdfsdfsdfsdf
 sdfsdfsdfsdfsdfsdf</div>
 <div class=col-md-4>sdfgsdfgfdg</div>

css:

 .col-md-8{border:1px solid orange; padding:8px;}
 .col-md-4{border:1px solid orange; }

Answer 1

word-wrap: break-word;

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.

источник

Пример:

.box { 
  width: 300px; 
  border: 1px solid #000;   
  text-align: center; 
  padding: 0 1rem; 
   
  word-wrap: break-word; 
}

<div class="box"> 
    Lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll 
  </div>

Ваш пример:

 .col-md-8{border:1px solid orange; padding:8px; word-wrap: break-word;} 
 .col-md-4{border:1px solid orange; word-wrap: break-word; }

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<div class="container"> 
    <div class=row> 
   <div class=col-md-8> 
     <h1>sdfkgjsdlfkhdf</h1> 
    <p>skjhfksjdhfksjhdfksjhdfksjdhfksjhdfkjshdfkjsdhfksjdhfksjdhfksjdhfsfsdfsdfsdfsdfsdfsdfsdf 
      sdfsdfsdfsdfsdfsdf </p> 
   </div> 
     
   <div class=col-md-4>sdfgsdfgfdg</div> 
  </div> 
</div>