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

 

在字体大小和屏幕宽度之间是否存在数学关系，以便在调整视口/窗口宽度时不会出现任何单词中断？

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

Lorem ipsum dolor坐amet，consectetur adipisicing elit。

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

现在，因为如果单位设置为vw ，在视口宽度的调整大小时字体大小会增加/减少，所以我想确保没有任何单词分隔符，想象您正在调整带有文本的图像大小。 这有可能实现吗？

您可以将容器设置为特定的vw宽度，然后将字体大小设置为特定的vw值。 有了这两件事，如果字体是明确加载的，而不是依赖于“浏览器决定使用的任何字体”，那么调整大小应该按照您的预期工作，所以没有CSS serif ，也没有CSS "Times New Roman"因为您不会不知道该字体的哪个版本最终会被实际使用，所以你不能相信字体指标是你所需要的。 所以：

  • 通过@font-face规则加载特定的字体
  • 确保你的容器被设置为以vw表示的宽度
  • 确保你的容器以vw单位指定它的字体大小。

    • CSS： 

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

    HTML： 

    ....
<link href="https://fonts.googleapis.com/css?family=Lato" 
<div class="rs">
  This is text This is text This is text T
</div>

    现场示例：http://jsbin.com/januxevebe/edit?html,css,output

    链接地址: http://www.djcxy.com/p/75543.html

    上一篇: Avoid word break while using vw for font size

    下一篇: vertically aligning input with label having background image