Vincent Rodomista Vincent Rodomista - 7 months ago 33
HTML Question

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

Codepen here


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


#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.


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: