标题元素中的换行符

Question

所以，我正在尝试重新创建我在网上找到的宝丽来图像显示，它也使用 title 元素作为图像的标题。问题是我想在标题元素内换行，但我无法实现。我使用了 br 但在 title="..." 中，文本只是一个纯文本，结果 br 也像文本一样给出。例如，我想要一个 "Hello br world" 的标题，其中 br 是打破 line/title 的点。我给你 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


 和代码中的换行符都应该有效。当然它将显示为 space（就像 HTML 中的每个换行符一样），除非您在 CSS:

中明确更改它

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

Answer 3

只需使用马车return。  或者换行。 


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

标题元素中的换行符

Line break in title element

html

css

line-breaks

title