Оберните слова в новую строку

Question

У меня возникли проблемы с отображением содержимого p внутри div. Если мой p слишком длинный, я хочу разбить его на новую строку. Но прямо сейчас он просто растягивается. Как я могу исправить его для отображения в виде блока в div? Спасибо.

.box { 
 
    position: relative; 
 
    width: 25%; 
 
    padding-bottom: 25%; 
 
    background: #fff; 
 
} 
 
.boxInner { 
 
    position: absolute; 
 
    left: 5px; 
 
    right: 5px; 
 
    top: 5px; 
 
    bottom: 5px; 
 
    overflow: hidden; 
 
} 
 
.boxInner img { 
 
    width: 100%; 
 
} 
 

 
.boxInner .titleBox { 
 
    background: #000; 
 
    background: rgba(0, 0, 0, 0.9); 
 
    color: #FFF; 
 
    padding: 10px; 
 
    text-align: center; 
 
    height: 42%; 
 
    position: absolute; 
 
    display: block; 
 
} 
 

 

 
.titleBox1 { 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.titleBox2 { 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
}

<div class="box"> 
 
     <div class="boxInner"> 
 
     <div class="titleBox titleBox1" > 
 

 
      <p> 
 
      asdasdasdasdddddddddasdddddddddddddddddddd 
 
      </p> 
 
     </div> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> 
 
     <div class="titleBox titleBox2">An old greenhouse</div> 
 
     </div> 
 
    </div>>

Answer 1

добавить что-то к классу CSS

р {перенос слов: брейк-слова; ширина: 100px; }

Я думаю, что слово-обертка не может работать хорошо, не задавая ширину в css.

Answer 2

Ваш p содержание элемент asdasdasdasdddddddddasdddddddddddddddddddd, который не содержит допустимую строку нарушение пунктов. Вам нужно определить, где и как оно может быть разбито, а затем вставить, например. либо пространства нулевой ширины, либо мягкие дефисы. Если вам нужна помощь в этом, вы должны написать описание вашего контента реального в элементе p, проиллюстрированном примерами реальных и указать принципы, в соответствии с которыми он может быть поврежден.