css: перекрывающиеся заголовки h1 в плавающих divs

У меня есть div, содержащий три внутренних divs, которые все плавают влево. Эти поплавки должны представлять три столбца. Пока все в порядке.css: перекрывающиеся заголовки h1 в плавающих divs

Но если я добавляю заголовки внутри каждого из внутренних div и заголовки должны быть широкими, заголовки будут перекрываться.

Изображение будет показывать это лучше, чем 1000 слов:

enter image description here

(. Извините за внешнюю ссылку Но из-я новичок здесь я не имею достаточно очков репутации размещать фото :))

Мой HTML-код выглядит следующим образом:

 <div id="content_container" class="appearance"> 
     <div class="column"> 
     <h1>My headline1111111111111</h1> 
     text 
     </div> 
     <div class="column"> 
     <h1>My headline2222222222</h1> 
      text 
     </div> 
     <div class="column"> 
     <h1>My headline333333333333333333333</h1> 
     text 
     </div>    
     <div style="clear: left;"></div> 
    </div>

А вот мой CSS код:

#content_container { 
    position: relative; 
} 

.column { 
    float: left; 
    width: 33.33333%; 
    padding-right: 10px; 
} 

.appearance { 
    margin: 0 auto; 
    width: 60%; 
}

Контент content_container, с другой стороны, также является внутренним div другого контейнера-контейнера. Не знаю, имеет ли это значение в этом случае.

Любые идеи, что я мог бы сделать, чтобы исправить это?

источник

2014-05-15 nki

Я думаю word-break, с помощью которого можно указать, если вы хотите разорвать линию в слове, будет делать трюк:

.column { word-break:break-all; }

jsFiddle demo.

Вы можете прочитать больше о word-break собственности here.

источник

2014-05-15 23:34:09

Привет, Даниэль, спасибо. Но это сломает слово. Это не решение для меня. Можно ли обернуть только целые слова, используя этот метод? – nki

@ user3642823 Да, есть «белое пространство: пре-линия», которое делает это, но так как слово может быть настолько длинным, что оно тоже не поместится на следующей строке, вы должны пойти с решением @ScoreNinja, если вы «Не хочу« вырезать »слова. Его решение создает полосу прокрутки, и, следовательно, сохраняет все слова такими, какие они есть. –

Невозможно ли обернуть заголовки, как обычные тексты вообще? Это неудовлетворительное решение для меня, чтобы сделать его прокручиваемым или скрыть его:/ – nki

Вы можете использовать

.column { overflow: hidden; }

укоротить заголовок или

.column { overflow-x: scroll; }

, чтобы сделать его прокручивать.

источник

2014-05-15 23:37:16 ScorNinja

css: перекрывающиеся заголовки h1 в плавающих divs

ответ

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