How to Wrap Text Within an Image-Link? HTML CSS

Question

I have some code which displays images from imgur. When hovering over an image, I want the title attribute to appear at the top of the image.

I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.

I would like the text to start on a new line once it reaches the end of it's container.

I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).

Any advice on how to resolve this is much appreciated!

I have the following html:

<section id='photos'>
  <p> 
     <a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg'      title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'> 
           <img src='http://i.imgur.com/eWlGSdR.jpg' alt=''> 
   </a>
</p> 

And the following CSS:

 a.hovertext {
   position: relative;
   text-decoration: none !important;
   text-align: left;
 }

 a.hovertext:before {
   content: attr(title);
   position: absolute;
   top: -1;
   padding: 0.5em 20px;
   width: 90%;
   text-decoration: none !important;
   color: red;
   opacity: 0.0;
 }

a.hovertext:hover:before, a.hovertext:focus:before {
   opacity: 1.0;
 }

Answer 1

As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.

Removing this solved the problem.