html - 响应式调整文本大小，使其显示在同一行

Question

我正在使用我希望在同一行显示的带有 anchor 的网站导航指南。在电脑上没有问题，因为屏幕的宽度大于我的文字长度(只有 5 个单词)，但在手机上，文字写在两条不同的线上。

我尝试将 CSS 属性 white-space: nowrap; 添加到包含文本的 div，但是有了这个，不适合该行的文本部分就会消失页面溢出。有没有一种方法可以将此属性与另一个属性相结合，以便如果文本不适合一行，则文本的大小会减小到适合的大小？

顺便说一句，我正在使用 BootStrap 4。

HTML

<section>
    <div class="container">
        <div class="row mb-5">
             <div class="col-12 nowrap">
                 <a class="mr-1 noDecoration" href="tienda.php">Tienda</a> > <a class="mx-1 noDecoration" href="tienda.php#sudaderaIcon">Sudaderas</a> > <span class="ml-1">Sudadera Tape Verde</span>
             </div>
        </div>
    </div>
</section>

CSS

.nowrap {
    white-space: nowrap;
}

.noDecoration, .noDecoration:hover {
    text-decoration: none;
    color: #000000;
}

Answer 1

你应该使用 media queries根据屏幕宽度更改字体大小

@media screen and (max-width : 320px)
{
  #your-element
  {
    font-size:7px; /* or 1em */
  }
}
@media screen and (max-width : 1204px)
{
  #your-element
  {
    font-size:16px;
  }
}

你也可以尝试提到的vw、vh、vmin here ，但并未得到广泛支持。