2013-10-10 4 views
0

Текст выходит из моего div, и на нем нет фиксированной ширины, поэтому я не знаю, почему это делается. Боковая панель не должна превышать 200 пикселей.Текст, плавающий с боковой панели

HTML

 <div id="sidebar"> 
     <div class="side_box"> 
      <div class="side_box_title"><span>VAULT FEED</span></div> 
      <div class="side_box_content"> 
       dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd 
      </div> 
     </div> 
    </div> 

CSS

#sidebar { 
    max-width: 200px; 
    margin-top: 1%; 
    margin-left: 1%; 
    float: left; 
} 
.side_box { 

} 

.side_box_title { 
    height: 25px; 
    padding-top: 2px; 
    text-align: center; 
    color: white; 
} 

.side_box_content { 
    border: solid 1px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

ответ

1

Я бы с CSS3 словом - разбить собственность. ->Word break css

просто добавить в .side_box_content класс следующее:

.side_box_content { 
    border: solid 1px; 
    padding-left: 5px; 
    padding-right: 5px; 


    word-break: break-all; 
} 

Имейте идти на: ->Test drive

Ура!

+0

Большое спасибо, не могу поверить, что я пропустил, что это полностью кросс-совместимый браузер правильно? – NullBy7e

+0

в соответствии с [Prefixr] (http://prefixr.com/index.php) ему не нужен префикс поставщика, однако есть хорошая статья о css-трюках, в word-break [проверить это] (http: //css-tricks.com/almanac/properties/w/word-break/) – RGLSV

+0

или вы можете пойти с ** 'word-wrap: break-word;' ** Оба правила похожи, но ** 'word- break' ** будет просто игнорировать любые пробелы, запятые или дефисы и разбить слово, в то время как ** 'word-wrap' ** будет следить за пробелами, запятыми и дефисом, а после этого сломает слово. Последний должен иметь максимальную ширину или заданную ширину и лучше всего работать с блочными элементами – RGLSV

1

Или вы могли бы попробовать

.side_box_content {  
    ... 
    word-wrap: break-word; 
} 
Смежные вопросы