CODEWITHSUNDEEP
htmlcsstitleline-breaks
Rafael_Tsantes
Rafael_Tsantes

Reputation: 27

Line break in title element

So, I am trying to recreat a polaroid image display that i've found online which uses the title element as the caption of the image as well. The thing is that i want a line break inside the title element and I cannot achieve that. I used br but inside the title="..." the text is just a plain text which gives as a result the br like a text as well. For example I want to have a caption of "Hello br world", with br to be the point of breaking the line/title. I am giving you the CSS code:

.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;

}

and the 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>

I used elements like & # 10; or & # 13; that some people suggested which worked only on the tooltip that comes out when i hover the image or its caption, whilst i want it to be visible in the caption of the image.

Thanks!

Upvotes: 0

Views: 3105

Answers (3)

DreamTeK
DreamTeK

Reputation: 34307

Simply use a carriage return. &#13; Or linebreak. &#10;

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

Upvotes: 2

jaboja
jaboja

Reputation: 2237

Both &#10; and just a line break in code should work. Of course it will display just as a space (like every line break in HTML) unless you explicitly change that in CSS:

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

Upvotes: 1

Joel Rummel
Joel Rummel

Reputation: 850

Just put a literal line break in your code:

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

Upvotes: 0

Related Questions