jquery - 我怎样才能确保文本永远不会从屏幕上掉下来

Question

我有一个关于处理字体大小和窗口宽度的小问题。有时我的标题只是一个长词，对于较小的设备，这个词会从屏幕上掉下来，所以你只能看到这个词的一小部分。

我怎样才能确保您始终在每个屏幕上看到完整的单词？

我已经尝试了几种 css 解决方案，但单词中断并继续下一条规则。

谢谢!

Answer 1

如果您希望字体大小取决于屏幕的宽度，那么您可以通过媒体查询轻松实现。

查看演示。

h1 {
  font-size: 0.68em;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 0.87em;
  }
}
@media screen and (min-width: 992px) {
  h1 {
    font-size: 1em;
  }
}
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 1.5em;
  }
}
  
  

<h1>How can I make sure text never is falling of the screen This is a long header</h1>

您也可以到这里了解更多关于不同媒体设备屏幕尺寸的信息

参见 link