2

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?

5
  • 2
    Separa cada linha em uma div e atribui uma classe para cada uma, ou usa nth-child do css3 30/01/2018 às 17:02
  • Na verdade acho que o correto sera cada uma em um <p>
    – hugocsl
    30/01/2018 às 17:08
  • @Everson nth-child funciona na estrutura que eu montei? 30/01/2018 às 17:09
  • Com CSS acho difícil desse jeito, mas com JS é possível.
    – Sam
    30/01/2018 às 17:17
  • Vale salientar que esse HTML só tem 2 linhas.
    – Sam
    30/01/2018 às 17:17

3 Respostas 3

3

Usando um div e divs 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>

1

O correto seria usando a tag <p> de parágrafo.

<p> The Paragraph element

https://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>

5
  • cara, esqueceu do css
    – Leandro
    30/01/2018 às 17:12
  • @Leandro editado com CSS para ficar igual ele quer
    – hugocsl
    30/01/2018 às 17:18
  • Ao MEU ver não existe o "correto" e sim o mais adequado. HTML é apenas linguagem de estrutura e vai muito da finalidade do que se quer fazer. Exemplo: a tag <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 30/01/2018 às 17:27
  • Lembrando que a sua resposta está correta para a pergunta em questão. :D 30/01/2018 às 17:28
  • @Everson essa é a beleza do CSS, sempre existe um outro jeito de fazer a mesma coisa haha, mas cada projeto tem suas particularidades... Ai vai do autor da pergunta escolher a que mais lhe agrada. obs: a div também tem seus valores default que podem ou não servir... ;)
    – hugocsl
    30/01/2018 às 17:31
1

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)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .