Html 如何使用“中的长字符串内容停止div”；挂断“；其他部门

HTML:

<div id="splash" class="divider">
  <h1 class="text-center text-uppercase">vincent/rodomista</h1>
  <p class="text-center text uppercase">Full Stack Web Developer</p>
</div>

---

我试图制作一个简单的个人网站来自学CSS，但一直在努力解决一个问题。当我把屏幕缩小到中或小的时候，我的第一个div看起来比它下面的div“挂断”——因为它比其他的长。我怀疑这是因为其中包含的文本没有正确包装。任何帮助或指导都将不胜感激。

有两种选择-您可以通过设置

overflow:hidden在div收缩时隐藏文本，或者您可以使用
分词
CSS属性：

断字：断字

在文本元素上

更多信息：

有两种选择-通过设置
overflow:hidden，可以在div收缩时隐藏文本，或者您可以使用
分词
CSS属性：

断字：断字

在文本元素上

更多信息：

包装对您没有多大帮助，因为名称是一个不间断的字符串。虽然您可能不太适应使其完全响应，但当视口变小时，减少飞溅的字体大小肯定会有帮助。作为记录，我同意@Shane-但是，我的答案是对这个问题的直接回答，与其说是设计/理念方面的建议，不如说是设计/理念方面的建议。@Shane缩小字体大小的最佳方法是什么？独自创立我愿意学习如何使其具有响应性。@VincentRodomista签出：您可以添加如下内容：
@仅媒体屏幕和（最大宽度：768px）{#splash h1{font size:2em；}
包装对您没有多大帮助，因为名称是一个不间断的字符串。虽然您可能不太适应使其完全响应，但当视口变小时，减少飞溅的字体大小肯定会有帮助。作为记录，我同意@Shane-但是，我的答案是对这个问题的直接回答，与其说是设计/理念方面的建议，不如说是设计/理念方面的建议。@Shane缩小字体大小的最佳方法是什么？独自创立我愿意学习如何使其具有响应性。@Vincentrodomita签出：您可以添加如下内容：
@仅媒体屏幕和（最大宽度：768px）{splash h1{font size:2em；}}
#splash {
    background: gray;
    height: 75%;
}

#splash h1 {
    margin-left: auto;
    margin-right: auto;
    font-size: 6em;
    color: white;
    margin-top: 10%;
}

#splash p {
    font-size: 5em;
    color: white;
}
.divider {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 60%;
    display: table;
}