移动宽度标题打破了水平布局

Question

在 Stack Overflow 中搜索了 30 分钟后，我找不到解决问题的方法，所以这里是：

我有一个静态博客，它的响应率几乎达到 99%。问题在于带有更宽词的更大标题（在我的例子中，例如“documentfragments”），它们会在宽度低于 400 像素的屏幕中生成水平滚动条。

这里是例子：

如您所见，宽度（在特定情况下）为 320 像素，并且页眉破坏了布局。

我不是样式表专家，我正在学习，但无论我做什么（调整宽度、字体大小等）我都无法解决问题。

有什么想法吗？

Answer 1

这里有几个选项。

1.缩小字体大小。

您可以将字体大小减小到不太可能导致文本溢出的大小。

2。连字符 - 换行

使用 CSS，您可以将元素设置为连字符，以便在空间不足时自动换行。只需将 word-wrap: break-word 添加到 CSS 中的元素即可。

3.使用Javascript

您可以编写一些 javascript 来计算它需要适应的宽度，然后适当地更改字体大小。