Vincent Rodomista Vincent Rodomista - 4 months ago 14
HTML Question

How to stop div with long string of content from "hanging off" other divs

Codepen here

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


I'm trying to make a simple personal website to teach myself CSS, but have been struggling with one problem. The first div that I have, upon shrinking the screen to medium or small, seems to "hang off" of the divs below it - in that it is longer than the others. I suspect this is because the text contained in it is not being properly wrapped. Any help or guidance would be appreciated.

Answer

There are two choices - you can hide the text as the div shrinks by setting overflow: hidden; on the parent element, or you can use the word-break CSS property:

word-break: break-word;

On your text elements.

More info:

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