如何在图像中环绕文本 - Link？ HTML CSS

Question

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

我已经实现了所有这些，但是当文本变得可见时，它只出现在一行上，当它用完 space 时会自行覆盖，如图所示。

我希望文本在到达容器末尾后另起一行。

我试过添加 word-wrap: break-word;下面的每个 CSS 选择器，以及 P 选择器（因为 link 包裹在 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 在评论中所说，这是由于代码意识不佳造成的，因为在代码的其他地方，我在 #photos 元素上调用 'line-height:0;'。

删除它解决了问题。

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>

容易

如何在图像中环绕文本 - Link？ HTML CSS

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

html

css

word-wrap