title: How to Wrap Text Within an Image-Link? HTML CSS
body: <p>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.</p>
  
  <p>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.<a href="https://i.stack.imgur.com/gc3dB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gc3dB.png" alt="Image of the overlapping text"></a></p>
  
  <p>I would like the text to start on a new line once it reaches the end of it's container. </p>
  
  <p>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).</p>
  
  <p>Any advice on how to resolve this is much appreciated!</p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;section id='photos'&gt;
    &lt;p&gt; 
       &lt;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]'&gt; 
             &lt;img src='http://i.imgur.com/eWlGSdR.jpg' alt=''&gt; 
     &lt;/a&gt;
  &lt;/p&gt; 
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code> 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;
   }
  </code></pre>