Html 相应调整文本大小，使其显示在同一行上

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

我尝试添加CSS属性

空白：nowrap

添加到包含文本的div，但是如果使用此选项，文本中不适合该行的部分将由于页面溢出而消失。是否有一种方法可以将此属性与另一个属性组合起来，以便在文本不适合一行的情况下，文本的大小减小到适合的大小

顺便说一句，我使用的是Bootstrap4

HTML

---

尝试此代码，查看

完整页面中的代码段

，并调整浏览器窗口的大小

.nowrap{
空白：nowrap；
字体大小：14px；//已添加
字体大小：3.4vw；//已添加
}
.noDecoration、.noDecoration:悬停{
文字装饰：无；
颜色：#000000；
字体大小：14px；//已添加
字体大小：3.4vw；//已添加
}

>>Sudadera磁带Verde

尝试此代码，查看

全页中的代码片段

，并调整浏览器窗口的大小

.nowrap{
空白：nowrap；
字体大小：14px；//已添加
字体大小：3.4vw；//已添加
}
.noDecoration、.noDecoration:悬停{
文字装饰：无；
颜色：#000000；
字体大小：14px；//已添加
字体大小：3.4vw；//已添加
}

>>Sudadera磁带Verde

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

@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，但它并没有得到广泛支持。

您应该根据屏幕宽度来更改字体大小

@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，但它没有得到广泛支持。

请将代码发布到您可以发布包含文本包装的html吗？（几个级别会更好）如果你知道文本的长度，你可以使用字体大小：[value]vw；Sry，我刚刚添加了问题所涉及的代码，它没有显示您的问题。请将代码发布到您可以发布包含文本包装的html吗？（几个级别会更好）如果你知道文本的长度，你可以使用字体大小：[value]vw；Sry，我刚刚添加了问题所涉及的代码，它没有显示您的问题..我一直在考虑使用这种方法，直到我看到这个单元有几个兼容性问题，您知道这是怎么回事吗？它支持93.93%，请检查这个或任何答案已经解决了你的问题，请考虑通过点击复选标记接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。：）@LuiscriI正在考虑使用这种方法，直到我读到这个单元有几个兼容性问题，你知道这是如何正确的吗？它支持93.93%，请检查这个或任何答案已经解决了你的问题，请考虑通过点击复选标记接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。：）@最后，我不得不通过媒体查询，尝试实现大众汽车的功能，但在手机上显示的文字太小，几乎无法阅读。谢谢你最后我不得不用媒体查询，试着安装大众汽车，但在手机上显示的文字太小，几乎无法阅读。非常感谢。

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