Style each line differently

Navigation
2

I have a text in four lines: 

<span>Pare de perder
    tempo
    por falta de<br>
    Presença Digital.</span>

I want each of these lines to have a different font size. What would be the most correct way to do it?

    
asked by anonymous 30.01.2018 / 17:59

3 answers

3

Using div and div internal (you can also put a specific class in each): 

.mensagem div:nth-child(1) {
  font-weight: bold;
}
.mensagem div:nth-child(2) {
  color: red;
}
.mensagem div:nth-child(3) {
  text-decoration: underline;
}
.mensagem div:nth-child(4) {
  font-size: 18pt;
}
<div class="mensagem">
  <div>
    Pare de perder
  </div>
  <div>
    tempo
  </div>
  <div>
    por falta de
  </div>
  <div>
    Presença Digital.
  </div>
</div>
    
30.01.2018 / 18:13
1

The correct one would be using the% code_with% paragraph tag.

<p> The Paragraph element

link 

.container {
    margin-left: 4rem;
}
.container > p:first-child {
    position: relative;
    margin-left: -2rem;
}
<div class="container">
    <p>Pare de perder</p>
    <p>tempo</p>
    <p>por falta de</p>
    <p>Presença Digital.</p>
</div>
    
30.01.2018 / 18:10
1

A random and dynamic way of doing this is by using JavaScript, changing <span> to <pre> . pre allows pre-formatting by displaying text the way it was typed, with spaces and line breaks. 

var pre = document.querySelector("pre"),
teste = pre.innerHTML.trim().split("\n"),
final = '';
for(var x=0; x<teste.length; x++){
   final += "<span style='font-size: "+ Math.floor(Math.random()*(24-12)+12) +"."+Math.floor(Math.random()*(9-1)+1)+"px;'>"+teste[x]+"</span>\n";
}

pre.innerHTML = final;
pre{
   font-family: Tahoma, Arial, Helvetica;
}
<pre>Pare de perder
    tempo
    por falta de
    Presença Digital.</pre>

The 24 value is the maximum font size and 12 minimum. For example, if you want a maximum font of 28 and a minimum of 9: 

Math.floor(Math.random()*(28-9)+9)
    
30.01.2018 / 18:59
Load HTML from another HTML [duplicate] Delete the "X" in the Header in the R