调整文本大小，但仅限于没有足够的空间

Question

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

以下是结果可能如下所示的示例：

Answer 1

您可以使用自动换行或溢出换行或使用css添加变量（即：符合您需要的字体大小），只有在媒体查询（您建立的）返回true时才更改它; < / p>

媒体查询说明：

我们说我建立了这个变量

: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%);
}

参考：

overflow-wrap：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/