使用vw进行字体大小时避免单词中断

Question

font-size 与屏幕宽度之间是否存在数学关系，以便在调整视口/窗口宽度的大小调整期间没有单词中断？

例如，如果我将段落的字体大小设置为shared_ptr，段落的第一行显示为 -

  

Lorem ipsum dolor sit amet，consectetur adipisicing elit。

如果我要调整视口的宽度，如果视口宽度很小以容纳句子，则会出现单词中断，因为font-size设置为16px个单位。

现在，如果在px中设置了单位，则在调整视口宽度的大小调整期间增大/减小字体大小，我想确保没有单词分隔符，想象您正在调整带有文本的图像大小在上面。这有可能实现吗？

Answer 1

您可以将容器设置为特定的vw宽度，然后将字体大小设置为特定的vw值。有了这两件事，调整大小应该按照您的预期工作，提供显式加载字体，而不是依赖于＃34;浏览器决定使用的任何字体＆＃34;，所以没有CSS {{ 1}}，但也没有CSS serif，因为您不知道该字体的哪个版本最终会被实际使用，因此您不能相信字体指标是您需要的。所以：

1. 通过"Times New Roman"规则
加载特定字体
2. 确保您的容器设置为宽度以@font-face
表示
3. 确保您的容器以vw为单位指定其字体大小。

CSS：

vw

HTML：

.rs {
  width: 50vw;
  background: lightgreen;
  font-family: lato;
  font-size: 3.3vw;
}

实例：http://jsbin.com/januxevebe/edit?html,css,output