如何在图像链接中包装文本？ HTML CSS

Question

我有一些显示来自imgur的图像的代码。 将鼠标悬停在图像上时，我希望title属性显示在图像的顶部。

我已经实现了所有这一切，但是当文本变得可见时，它只出现在一行上，当它用完空间时会自动写入，就像在图像中一样。

我希望文本一旦到达其容器的末尾就开始一个新行。

我尝试添加自动换行：break-word;下面的每个CSS选择器，以及一个P选择器（因为链接包含在一个p-tag中）。

非常感谢有关如何解决此问题的任何建议！

我有以下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> 

以下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

正如Dinesh在评论中所说，这是由于代码中的其他代码感觉不好，我在调用'line-height：0;'在#photos元素上。

删除它解决了这个问题。

Answer 2

我认为你可以在这上面使用一些java脚本，如果你只想让它添加额外的一行，如果我错了就纠正我。

这是我认为你的意思的一个例子：     首先在你的class =“hovertext”旁边添加这个文本：     ID = “HoverText”

Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>

<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>

Answer 3

只需在文本末尾使用break标记，该标记应位于第一行。

</br>

易