Text not aligning in CSS animation - html

Question

I am currently working on this JSFiddle but I am not sure how I can arrange the text on several lines as a paragraph instead of on Just one line, I find that when I insert more text, as I have overflow hidden, it seems to just carry on in one line out of the div. I would like to be able to have a paragraph in my spinning div.
I have tried < p > tags and < br > tags but neither of these work.
HTML
<div class="hover-img">
Text Goes Here
</div>
CSS
.hover-img {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:url(http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif);
-webkit-transform:rotateY(180deg);
-webkit-transform-style: preserve-3d;
line-height:200px;
text-align:center;
font-size:0;
}
.hover-img:hover{
-webkit-transform:rotateY(0deg);
font-size:14px;
color:white;
}

Answer 1

Use css property word-wrap: break-word; and reduce the line-height:200px; to value like 15px;
.hover-img {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:url(http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif);
-webkit-transform:rotateY(180deg);
-webkit-transform-style: preserve-3d;
line-height:15px;
text-align:center;
font-size:0;
word-wrap:break-word;
}
demo http://codepen.io/krish4u/pen/sijrC

Answer 2

Remove the line-height on .hover-img
Add display: table to .hover-img
Wrap the text in another div (.text) and use display: table-cell and vertical-align: middle on that div to align the text vertically in the centre.
Have a fiddle!
HTML
<div class="hover-img">
<div class="text">
Text Goes Here
<br />And Here
<br />And Here
<br />And Here
<br />And Here
</div>
</div>
CSS
.hover-img {
width: 200px;
height: 200px;
text-align:center;
display: table;
background: /* whatever value */
}
.hover-img:hover {
font-size:14px;
color:white;
}
.text {
display: table-cell;
vertical-align: middle;
}