Question

因此，我正在尝试重新创建我在网上找到的宝丽来图像显示器，该显示器也使用title元素作为图像的标题。问题是我想在title元素内换行，但我无法实现这一点。我使用了br，但是在title =“ ...”内，文本只是纯文本，因此也使br像文本一样具有br。例如，我想要一个标题为“ Hello br world”，而br是打破行/标题的重点。我给您CSS代码：

.polaroid-images a  {

    background: white;
    display: inline;
    float: left;
    margin: -50px 50px 30px;
    padding: 10px 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
    box-shadow: 0 4px 6px rgba(0,0,0,.3);
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    transition: all .15s linear;
    z-index:0;
    position:relative;

}

.polaroid-images a:after {

    color: #333;
    font-size: 20px;
    content: attr(title);
    position: relative;
    top:15px;

}

.polaroid-images img { 

    display: block; 
    width: inherit;

}

和HTML

<div class="polaroid-images">
    <a href="https://www.youtube.com/" title="Hello world"><img height="150" src="1st project/1stfront.jpg" alt="First" title="" /></a>
</div>

我使用了＆＃10;之类的元素。或＆＃13;有人建议仅在将鼠标悬停在图像或其标题上时出现的工具提示上起作用，而我希望它在图像的标题中可见。

谢谢！

Answer 1

只需在代码中插入一个文字换行符即可：

<div class="polaroid-images">

        <a href="https://www.youtube.com/" title="Hello
world"><img height="150" src="1st project/1stfront.jpg" alt="First" title="" /></a>

</div>

Answer 2


和代码中的换行符都应该起作用。当然，除非您在CSS中明确更改，否则它将以空格显示（就像HTML中的每个换行符一样）：

.polaroid-images a:after {
  white-space: pre;
}

Answer 3

只需使用回车即可。  或换行。 


<a href="https://www.youtube.com/" title="Hello&#13;world">HOVER OVER ME</a>

标题元素中的换行符

3 个答案: