Home / Questions / 76586
Accepted
Anónimo
Asked: 2020-06-08 02:08:48 +0800 CST 2020-06-08 02:08:48 +0800 CST

Horizontally align a word with sequentially smaller letters

  • 772

How do I align a word horizontally with letters that are sequentially smaller?

Something like this:

enter image description here

I've tried to do this in HTML+CSS , but I can't.

This is my code:

.a{font-size: 1.3em;margin:auto;}
.b{font-size: 1em;margin:auto;}
.c{font-size: .9em;margin:auto;}
.d{font-size: .8em;margin:auto;}
.e{font-size: .7em;margin:auto;}
.f{font-size: .6em;margin:auto;}
.g{font-size:.5em ;margin:auto;}
.h{font-size: .4em;margin:auto;}
<h1>
  <div class="a">M</div>
  <div class="b">i</div>
  <div class="c">L</div>
  <div class="d">e</div>
  <div class="e">t</div>
  <div class="f">t</div>
  <div class="g">r</div>
  <div class="h">a</div>......texto normal
</h1>

html

2 Answers

  1. Best Answer

    Another slightly more generic option:

    .texto span:nth-child(1){
  font-size: 30px;
}
.texto span:nth-child(2){
  font-size: 28px;
}
.texto span:nth-child(3){
  font-size: 26px;
}
.texto span:nth-child(4){
  font-size: 24px;
}
.texto span:nth-child(5){
  font-size: 22px;
}
.texto span:nth-child(6){
  font-size: 20px;
}
.texto span:nth-child(7){
  font-size: 18px;
}
.texto span:nth-child(8){
  font-size: 16px;
}
    <div class="texto">
  <span>M</span><span>i</span>
  <span>l</span><span>e</span><span>t</span><span>r</span><span>a</span>
</div>

    • 4

  2. Surely there is something more efficient and can be done with fewer resources.

    The first thing that occurs to me would be to do it with blocks for each letter <span>(letra)</span>.

    For a short and static text it can be considered a solution, for a longer or dynamic text, I don't know if it would be the most appropriate.

    .fs30 {font-size: 30px}
.fs25 {font-size: 25px}
.fs20 {font-size: 20px}
.fs15 {font-size: 15px}
    <p><span class="fs30">M</span><span class="fs25">i</span> <span class="fs20">l</span><span class="fs15">e</span><span class="fs20">t</span><span class="fs25">r</span><span class="fs30">a</span></p>

    • 3