如何在图像链接中换行？ HTML CSS

Question

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

我已经实现了所有这些目的，但是当文本变得可见时，它仅出现在一行上，并且在空间用完时会覆盖自身，如图像中所示。

我希望文本到达容器的末尾时从新行开始。

我尝试添加自动换行：断行； 到下面的每个CSS选择器，以及一个P选择器（链接都包装在p标签中）。

任何有关如何解决此问题的建议，我们将不胜感激！

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

简单