HTML data-title, break line

Question

I am using this code:

Is there a way I can break the line of the text within data-title?

Thanks.

<ul>
                    <a id="inline" href="#lightbox-content" href="#"><li data-title="Palestra de Sucesso"><div class="video-thumb"></div></li></a>
                    <a id="inline" href="#lightbox-content" href="#"><li data-title="Bons Negocios para Todos"><div class="video-thumb"></div></li></a>
                    <a id="inline" href="#lightbox-content" href="#"><li data-title="Seja Bem Sucedido em sua Carreira"><div class="video-thumb"></div></li></a>
                    <a id="inline" href="#lightbox-content" href="#"><li data-title="Qual o Preço do Sucesso?"><div class="video-thumb"></div></li></a>
                    <a id="inline" href="#lightbox-content" href="#"><li data-title="Você está preparado para 2014?, veja como estar"><div class="video-thumb"></div></li></a>
                </ul>

Answer 1

to be used later with a break line? Because you can breakline within the html with no problem. it reads from " to ", not lines.

Answer 2

Your question is a bit vague. Are you asking if you can just insert a line break on each line somewhere within the data-title attribute values? Because HTML allows you to add line breaks wherever you please without causing problems to page rendering.

Your markup is a bit sloppy. You have anchor tags as direct children in an unordered list. Your <li> tags should be the only direct children of the list, and they should be around your anchor and div tags. Like this:

<ul>
    <li data-title="Palestra de Sucesso">
        <a id="inline" href="#lightbox-content" href="#">
            <div class="video-thumb"></div>
        </a>
    </li>
    <li data-title="Bons Negocios para Todos">
        <a id="inline" href="#lightbox-content" href="#">
            <div class="video-thumb"></div>
        </a>
    </li>
    <li data-title="Seja Bem Sucedido em sua Carreira">
        <a id="inline" href="#lightbox-content" href="#">
            <div class="video-thumb"></div>
        </a>
    </li>
    <li data-title="Qual o Preço do Sucesso?">
        <a id="inline" href="#lightbox-content" href="#">
            <div class="video-thumb"></div>
        </a>
    </li>
    <li data-title="Você está preparado para 2014?, veja como estar">
        <a id="inline" href="#lightbox-content" href="#">
            <div class="video-thumb"></div>
        </a>
    </li>
</ul>

As an example to how I interpreted your question, can you break lines in the data-title attribute, like so:

<ul>
    <li data-title="Palestra de 
    Sucesso"><a id="inline" href="#lightbox-content" href="#"><div class="video-thumb"></div></a></li>
    <li data-title="Bons Negocios 
    para Todos"><a id="inline" href="#lightbox-content" href="#"><div class="video-thumb"></div></a></li>
    <li data-title="Seja Bem Sucedido 
    em sua Carreira"><a id="inline" href="#lightbox-content" href="#"><div class="video-thumb"></div></a></li>
    <li data-title="Qual o Preço 
    do Sucesso?"><a id="inline" href="#lightbox-content" href="#"><div class="video-thumb"></div></a></li>
    <li data-title="Você está preparado 
    para 2014?, veja como estar"><a id="inline" href="#lightbox-content" href="#"><div class="video-thumb"></div></a></li>
</ul>

Answer 3

Yes, simply press the Enter key, or whatever you normally use to break a line, eg

     <li data-title="Você está preparado para 2014?,
veja como estar">

(The second line should have no leading spaces unless you really want spaces there. Any spaces there are significant, in the sense of contributing to the attribute value.)

This will, by HTML5 CR, add a line break into the attribute value. In the DOM, it appears as canonicalized to LINE FEED, U+000A. It's then up to your code to do whatever you want with it.

Note: Your markup is invalid and has undefined effect. A ul element may not contain an a child. You can use (as per HTML5 and browser practice) <li><a ....><div>...</div></a></li> .