使用 CSS 调整换行文本的大小 [重复]

Posted 2023-03-06

【中文标题】使用 CSS 调整换行文本的大小 [重复]

【英文标题】：Resize text on wrap with CSS [duplicate]

【发布时间】：2022-01-17 07:08:19

【问题描述】：

我希望能够让文本在换行时调整大小，以便文本块的总高度始终相同。换句话说，如果文本换行到第二行，那么字体大小变成原来的一半，如果它换到第三行，那么它变成原来的三分之一，等等。这在 CSS 甚至 javascript 中是否可行？

【问题讨论】：

可以使用媒体查询。调整浏览器的大小以查看文本何时换行，然后在您减小字体大小的位置放置媒体查询

单独的 CSS，没有。用JS，很有可能。使用 javascript，您需要测量（某些元素的）（包装）行数，并采取相应措施（减小字体大小）

你为什么要这么做？ github 上有无数的开源代码可以自动将文本适应他们的容器。这里的用户体验目标是什么？

它应该是为 Next 应用准备的，页眉有一个文本框用于页面标题，页面标题因页面而异，设计人员希望它在换行时缩小。

【参考方案1】：

我认为您可以使用媒体查询或“大众”来做到这一点。 例如。

html

<div>
  <span class="resizing">Lorem Ipsum...</div>
</div>

CSS 使用 媒体查询

.resizing 
  font-size: 1rem;
  @media screen and (max-width: 800px)   // You can change this breakpoint
    font-size: 0.5rem;
  
  @media screen and (max-width: 400px)   // You can also change this breakpoint
    font-size: 0.33rem;
  

CSS 使用 vw

.resizing 
  font-size: 1vw; // 1vw is 1% of the browser width
  font-size: calc(3px + 1vw); // Or you can do something like this.

希望对你有帮助。