html - 调整文本大小，但前提是没有足够的空间

Question

我正在创建一个图表，显示键盘命令叠加在键盘图像之上。如果文本太长而无法放入键中，我希望文本缩小到容器的大小，否则保持默认大小。我将如何在 HTML 中完成此操作？我见过的解决方案似乎总是改变文本大小，而不是仅当容器太小时。谢谢。

这是一个结果可能看起来像的例子:

Answer 1

您可以使用 word-wrap 或 overflow-wrap 之类的东西或使用 css 添加变量(即:适合您需要的字体大小)并且仅在媒体查询(您建立的)返回 true 时更改它；

媒体查询解释:

假设我建立了这个变量

:root {
  --font-size: 16px;
  /* this is your regular font size that you will use in your entire document */
}

所以在给定的屏幕尺寸下:

@media screen and (device-width: 320px) and (orientation: portrait) { 
   :root {
     --font-size: 12px;
    }
}

你只要改变变量的值，它就会改变你使用那个特定变量的地方

如果你不知道它是如何工作的，你可以像这样使用这个 css 变量

.someClass {
  font-size: var(--font-size); */ and that's it  :) */
  /* You can also make calculations like this */
  font-size: calc(var(--font-size) - 40%);
}

引用:

溢出包装:https://css-tricks.com/almanac/properties/o/overflow-wrap/

自动换行:https://css-tricks.com/almanac/properties/w/word-break/

CSS 变量:https://www.madebymike.com.au/writing/using-css-variables/

媒体查询:https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/