如何确保文本永远不会掉到屏幕上

Question

我对处理字体大小和窗口宽度有一点疑问。有时候我的标题只是一个长字，而且设备较小，这个字落在屏幕上，所以你只能看到这个单词的一小部分。

如何确保您始终在每个屏幕上看到完整的字词？

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

谢谢！

Answer 1

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

参见演示。

＆＃13;

＆＃13;

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;
  }
}
  
  

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以到此处获取有关不同媒体设备屏幕尺寸的更多信息

请参阅link

Answer 2

您可以使用媒体查询并根据不同的屏幕尺寸调整文字大小。

Answer 3

如果你真的想要一个灵活的解决方案，并且出于其他原因已经使用了jQuery，你可以轻松使用正是这样做的jQuery-quickfit插件。