调整字母间距以适应容器尺寸

问题描述

我正在尝试创建以下效果

我如何做到这一点，以便使底部文本的字母间距与容器的末端对齐？

HTML

<section class="nav">
    <div class="logo">
        <p id="top">Reagan</p>
        <p id="bottom">Clayton</p>
    </div>
</section>

解决方法

我可以提供这样的解决方案：

.logo {
  width: 300px;
}

#bottom {
  display: flex;
  justify-content: space-between;
}

#bottom_two {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

#bottom_three {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  color: blue;
}

<section class="nav">
    <div class="logo">
        <p id="top">Reagan</p>
        <p id="bottom"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
        <p id="bottom_two"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
        <p id="bottom_three"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>       
    </div>
</section>

,

简单的解决方案：只需使用letter-spacing css属性。

要查看输出，请单击按钮“运行代码段”。

#logoText{
font-size:45px;
text-transform: uppercase;
margin-bottom:0; 
padding-bottom:0

}
#sologunText{
font-size:20px; 
letter-spacing: 30px;
margin-top:5px; 
padding-top:0
}

<section class="nav">
    <div class="logo">
        <p id="logoText">Logo Text</p>
        <p id="sologunText">Sologun</p>
    </div>
</section>