Alinhando dois parágrafos com um pouco de gambiarra

Image for post
Image for post

Essa semana me deparei com um texto inocente no rodapé do site, porém na hora de colocar ele no código percebi uma pegadinha.

Coloquei cada linha em um parágrafo e no css usei a propriedade text-align: justify sem mistério.

<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptatibus</p>
</footer>
footer{
width: 100%;
height: auto;
float: left;
padding: 20px 0;
background-color: #000;
}
p{
width: 600px;
height: auto;
float: left;
color: #FFF;
line-height: 12px;
text-align: justify;
margin: 0 0 0 calc(50% - 300px);
}

Só que na hora de ver o resultado olhei que não ficava alinhada que nem o layout, aí foi que percebi a pegadinha.

A segunda linha tem mais palavras do que a primeira, e para compensar isso o designer resolveu colocar um espaçamento lateral na primeira linha.

Eureca…. vou usar letter-spacing, pronto problema resolvido bora mandar o código para produção.

footer{
width: 100%;
height: auto;
float: left;
padding: 20px 0;
background-color: #000;
}
p{
width: 600px;
height: auto;
float: left;
color: #FFF;
line-height: 12px;
text-align: justify;
margin: 0 0 0 calc(50% - 300px);
}
p:first-child{
letter-spacing: 1.2px;
}

Mas então me veio a mente, e se o texto mudar amanhã?

Além do trabalho de alterar o texto vou ter que ir no css e mudar o espaçamento, e se for outro desenvolvedor que for fazer a manutenção, ele vai saber que tem que alterar no css?

Ai que entra a gambiarra, vamos colocar no css um after.

footer{
width: 100%;
height: auto;
float: left;
padding: 20px 0;
background-color: #000;
}
p{
width: 600px;
height: auto;
float: left;
color: #FFF;
text-align: justify;
line-height: 12px;
margin: 0 0 0 calc(50% - 300px);
}
p:after{
content: "";
width: 100%;
display: inline-block;
}

Agora se alterar o texto ele continua justificado.

É isso galera, espero que tenham gostado!!!!

Written by

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store