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

【问题标题】：Resize text, but only if there's not enough room调整文本大小，但前提是没有足够的空间
【发布时间】：2018-05-20 11:52:02
【问题描述】：

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

以下是结果的示例：

【问题讨论】：

我有待纠正，但我认为您将不得不考虑使用 javacript 来实现这一点，
您可能不得不使用 Javascript。
如果我总是事先知道容器的尺寸会有什么不同吗？（键盘按键的大小是已知的。）

标签： html font-size

【解决方案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/

【讨论】：

您能详细介绍一下媒体查询吗？我只使用它们根据浏览器窗口的大小推送不同的 CSS。不知道还有哪些参数可以查询。
@posfan12 改进的答案
是的，但我不关心屏幕尺寸（设备宽度）。无论屏幕大小，我都会显示相同的内容。
@posfan12 caniuse.com/#feat=flexbox 全球有 93.61% 的浏览器支持，部分有 3.69%（需要前缀的浏览器：-moz.. 等），总共有 97.3%，所以我认为它确实有很好的支持。如果你要等到 100% 支持他们，你可能永远不会使用 flexbox 哈哈
我不敢说我已经尝试过使用 flexbox 解决方案，但我无法准确复制您的要求，您可能必须使用 javascript ...对不起，伙计@posfan12