I'm having trouble getting the text inside a div to display correctly. When the text is too long, it just keeps stretching instead of breaking into new lines. How can I make sure that the content displays as a block within the div? Thank you.
.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>>