3

введите сюда описание изображения

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

<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; }
5
  • выложите ваш код, чтобы понять что не правильно 27 мар 2017 в 11:46
  • Вы написали слишком длинное слово, браузер не знет как его переносить, поэтому оно вышло за границы элемента
    – Crantisz
    27 мар 2017 в 11:48
  • у вас просто не правильно была написана разметка 27 мар 2017 в 11:53
  • jsfiddle.net/ht5zfcbo вот работающий ваш пример 27 мар 2017 в 11:54
  • @Crantisz Спасибо! Теперь все в порядке!
    – Алина
    27 мар 2017 в 11:56

1 ответ 1

2
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>

P.S: У Вас в структуре html ошибки (не закрытый параграф).

2
  • Спасибо за помощь! Я вроде читала, что его не обязательно закрывать, или это все-таки нужно?
    – Алина
    27 мар 2017 в 12:00
  • @Алина, "Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента." Лучше закрывать, чтобы избежать ошибок.
    – SVE
    27 мар 2017 в 12:04

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.