Question

我使用我的网站导航指南，我希望在同一行显示锚点。在计算机上没有问题，因为屏幕的宽度大于我的文本的长度（只有5个字），但在手机上，文本写在两个不同的行上。

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

我正在使用BootStrap 4 btw。

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

尝试使用此代码，请参阅full-page中的代码段并调整浏览器窗口的大小

.nowrap {
    white-space: nowrap;
    font-size: 14px; // Added
    font-size: 3.4vw;  // Added
  }

.noDecoration, .noDecoration:hover {
    text-decoration: none;
    color: #000000;
    font-size: 14px; // Added
    font-size: 3.4vw; // Added  
  }

<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>

工作小提琴here

Answer 2

您应该使用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;
  }
}

你也可以试试vh，vh，vmin提到here，但它没有得到广泛的支持。

响应文本大小调整大小以使其显示在同一行

2 个答案: