Tenho um texto em quatro linhas:
<span>Pare de perder
tempo
por falta de<br>
Presença Digital.</span>
Quero que cada uma dessas linhas tenha um tamanho de fonte diferente. Qual seria a forma mais correta de fazer?
Usando um div
e div
s internos (você também pode colocar uma classe específica em cada um):
.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>
O correto seria usando a tag <p>
de parágrafo.
<p>
The Paragraph elementhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
.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>
<p>
já tem uma margem pré-definida, portanto em algumas situações eu não necessito disso e terei que mexer no CSS pra corrigir isso, enquanto na <div>
(divisão) isso não acontece. jsfiddle.net/p1q3xuod
Commented
30/01/2018 às 17:27
Uma forma dinâmica e aleatória de fazer isso é usando JavaScript, trocando <span>
por <pre>
. O pre permite pre-formatação exibindo o texto da forma que foi digitado, com espaços e quebras de linha.
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>
O valor 24
é o tamanho máximo da fonte e 12
o mínimo. Por exemplo, caso queira uma fonte máxima de 28 e mínima 9:
Math.floor(Math.random()*(28-9)+9)
<p>