使用CSS自动调整溢出文本的大小。

Question

我目前有以下代码：

<p style="font-size: 20em; max-width: 100vw;">Hellooo!</p>

如您所见，字号对于屏幕来说太大了。我想让文本保持其设置的大小，直到溢出屏幕（我的尝试是max-width，但这并不起作用）。是否有一种仅使用CSS和HTML来解决此问题的方法？

由于我希望文字大小为20em，除非它溢出屏幕，我不想将width设置为任何值，而仅仅保持在20em。

谢谢！

- Greenreader9

Answer 1

min应该就可以了。

如果已知字体，也可以使用好的备用字体。

p {
  font-size: min(20em, 28vw);
  
  /* Next rules are only be have a clearer preview */
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
}

<p>Hellooo!</p>

- Joel

Answer 2

您可以使用CSS calc函数，根据vw值更改字体大小。

<p style="font-size:calc(25vw)">Hellooo!</p>

- Mehrwarz

Answer 3

如果您知道文本的长度，可以使用CSS min()函数与em大小配合，并根据视口设置最大尺寸。否则，您将需要一个polyfill。

<p style="font-size: min(20em, 12vw); max-width: 100vw;">Hellooo!</p>

- Zach Jensz

Answer 4

一个结合了媒体查询和可变单位(vw)的方案就能解决！

.mytext{

}
@media screen and (min-width: 1200px) {/*adjust*/
  .mytext {
    font-size: 20em;
  }
}
@media screen and (max-width: 1200px) {/*adjust*/
  .mytext {
    font-size: 20vw;
  }
}

<p style="" class="mytext">Hellooo!</p>

- Neptotech -vishnu