Html 如何缩放任意文本以始终适合视口宽度？

一个我正忙于工作的网站有一个带有一些非常大标题的部分。有件事我不知道该怎么办：

标题可以是一个或两个短或长的单词，例如：“塞浦路斯”到“努维勒·泽朗德”，并且必须缩放到大约视口的宽度。这意味着“塞浦路斯”越短，其单个字符将比“努维勒·泽朗德”长

我认为，用JavaScript实现这一点相对容易，但我希望使用纯HTML/CSS解决方案。所以：我如何缩放文本以适应视口的宽度？到目前为止，我自己也很困惑，不知道该怎么做

一些细节：

• 您只需要针对每个浏览器的最新版本，其中包括IE11
• 您可以使用在这些浏览器中工作的任何和所有HTML5和CSS3
• 如果将文本“Nouvelle Zelande”进行换行，也可以，只要两个单词中较长的一个仍然大致适合可用的宽度
• 您可以在标题内/周围添加额外的元素

---

请注意，视口单位不是解决方案。之前关于此（，）的问题的答案是“使用视口单位，如

vw

！”，但这根本不能解决此问题，精明的读者甚至可以这样回答。我甚至在下面的代码示例中使用了

vw

，以证明其非解决方案性。它将根据视口调整大小，但不会根据文本量调整大小

代码示例

h2{
字体系列：无衬线；
文本转换：大写；
字体大小：14vw；
空白：nowrap；
溢出x：隐藏；
保证金：0；
}

Nouvelle Zelande
澳大利亚
塞浦路斯

如果您希望使用插件，则

---

wich可以为您做到这一点

如果您希望使用插件，那么

---

wich可以为您做到这一点

如果用于设置字体大小（相对于其容器大小）的唯一单位是视口单位vw/

vh

，这将无法单独解决您的问题，即使容器与视口的宽度相同，因为它不会计算字母大小以适合容器

我能想到的最接近的非脚本解决方案是使用CSS元素计数器技巧，将每个字母包装成

span

我在这里设置的

130vw

最适合给定的字体，不过可能需要根据使用的字体系列进行调整

h2{
显示：内联块；
字体系列：无衬线；
文本转换：大写；
空白：nowrap；
溢出x：隐藏；
保证金：0；
}
/*一封信*/
h2跨度：第一个孩子：第n个最后一个孩子（1）{
字体大小：130vw；
}
/*在本演示中跳过了2-5*/
/*6封信*/
h2跨度：第一个孩子：第n个最后一个孩子（6），
h2 span：第一个孩子：第n个最后一个孩子（6）~span{
字体大小：calc（130vw/6）；
}
/*在本演示中跳过了7-14*/
/*15封信*/
h2跨度：第一个孩子：第n个最后一个孩子（15），
h2 span：第一个孩子：第n个最后一个孩子（15）~span{
字体大小：calc（130vw/15）；
}

Nouvelle Zelande

塞浦路斯

如果用于设置字体大小（相对于其容器的大小），唯一的单位是视口单位vw/

vh

，这将无法单独解决您的问题，即使容器与视口的宽度相同，因为它不会计算字母大小以适合容器

我能想到的最接近的非脚本解决方案是使用CSS元素计数器技巧，将每个字母包装成

span

我在这里设置的

130vw

最适合给定的字体，不过可能需要根据使用的字体系列进行调整

h2{
显示：内联块；
字体系列：无衬线；
文本转换：大写；
空白：nowrap；
溢出x：隐藏；
保证金：0；
}
/*一封信*/
h2跨度：第一个孩子：第n个最后一个孩子（1）{
字体大小：130vw；
}
/*在本演示中跳过了2-5*/
/*6封信*/
h2跨度：第一个孩子：第n个最后一个孩子（6），
h2 span：第一个孩子：第n个最后一个孩子（6）~span{
字体大小：calc（130vw/6）；
}
/*在本演示中跳过了7-14*/
/*15封信*/
h2跨度：第一个孩子：第n个最后一个孩子（15），
h2 span：第一个孩子：第n个最后一个孩子（15）~span{
字体大小：calc（130vw/15）；
}

Nouvelle Zelande

塞浦路斯

你好，尼克，欢迎。谢谢你的回答，但是你可能想简单地描述一下如何使用这个插件或者一个例子。嗨，Nick，欢迎你。谢谢你的回答，但是你可能想简单地描述一下如何使用插件或一个例子。