Html 根据屏幕宽度调整侧边栏中的文本大小

我有一个边栏div，它占据了总屏幕宽度的12%（设置为css属性）。我在这个div中还有一个

块，带有标题。当我将显示器切换到一个较小的显示器时，侧边栏会变得更薄，导致标题从侧边栏中延伸出来

---

如何设置格式以使文本始终保持在行内？（“MY TI…”可以作为一个结果）

在CSS方面没有100%确定的方法，但是标题通常应该放在两行上，这比它在屏幕截图中的效果要好。如果你想让别人看你的代码，就把它贴出来

不过，当侧边栏位于较小的屏幕上时，您应该使用媒体查询使其更宽：

.sidebar
{
  width:12%;
}

@media screen and (max-width: 600px) {
  .sidebar
  {
    width:30%;
  }
}

这里有一个例子

此外，您还可以在此处阅读有关媒体查询的更多信息：

请像这样尝试：

<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>


.sidebar {
    border-right: 1px solid black;
    height: 600px;
    width: 186px;
}

我的头衔
.侧边栏{
右边框：1px纯黑；
高度：600px；
宽度：186px；
}

如果已知标题文本，您可以在原始样式或媒体查询中使用视口单位

vw

来显示

字体大小

您还需要将侧边栏
width
也设置为
vw
，或者设置一个百分比值以使其具有响应性


html，正文{
身高：100%；
保证金：0；
}
.侧边栏{
右边界：实心；
身高：100%；
浮动：左；
宽度：15vw；
}
.侧边栏h1{
字体大小：4vw；
文本对齐：居中；
}

我的头衔