Question

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：

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

我试图建立一个简单的个人网站来自学CSS，但一直在努力解决一个问题。在将屏幕缩小到中等或小的时候，我所拥有的第一个div似乎是＃34;挂断＆＃34;在它下面的div - 因为它比其他的更长。我怀疑这是因为包含在其中的文本没有被正确包装。任何帮助或指导将不胜感激。

Answer 1

有两种选择 - 您可以通过在父元素上设置overflow: hidden;来隐藏文本，因为div可以缩小，或者您可以使用word-break CSS属性：

word-break: break-word;

在您的文字元素上。

更多信息：

https://css-tricks.com/almanac/properties/w/word-break/

如何使用来自＆＃34;挂掉＆＃34;的长串内容来阻止div其他div

1 个答案: