我目前有以下代码:

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

如你所见,字体大小对于屏幕来说太大了.我希望文本保持在设定的大小,直到它溢出屏幕(我的try 是max-width,但这不起作用).有没有办法只用CSS和HTML来解决这个问题?

由于我希望文本大小为20em,除非它溢出屏幕,所以我不希望将width设置为20em以外的任何值.

谢谢

推荐答案

min should do it.

对于已知的字体,您也可以使用良好的回退.

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>

Html相关问答推荐

需要帮助实现悬停动画效果

需要关于HTML的建议

如何在一张表中逃脱边境坍塌--崩溃?

需要帮助创建一个简单的html css网格布局

穿过整个屏幕的旋转线

如何制作';在第';页中搜索;是否发现多个元素中的单词?

多次使用组件时计数Angular 14中嵌套数组的指令

我的 *ngFor 中的 array.reverse() 在生产中不起作用

在 HTML 视频上环绕文本叠加

如何在 flex 项目中忽略子元素的宽度

如何使用CSS Select 同级元素的::before伪元素?

如何调整底部有 SVG 的元素的高度,使其在所有宽度上看起来都不错?

如何在 css 和 html 中创建花状 struct

输入框不是全宽

为什么 text-align 应用于 span 而不是 CSS 中的 img

暗模式转换器

font awesome 的 CDN/CSS 如何工作?

打开 Bootstrap 模式时无法获得模糊的背景

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列

HTML CSS 响应式卡片