Text in a div: splitting in middle when it word wraps

Question

I've got a centered text phrase that fits on one line in some devices, but wraps into two lines on others. The text is in a div. On some devices it's just barely too long, so only the last word wraps. Aesthetically, this looks bad. What I wish I could do is split the phrase in the middle, so each line is centered at a similar length.

I've tried this CSS:

text-align: center;
margin: 0 auto;
width: 100%;

but that only gets me to the problem I described. After googling for how to proceed, I haven't found any viable solutions. Actually, I'm not finding anyone trying to ask the same question, so I suspect there's something off about my search terms. How do you word wrap in the middle of the text instead of on the right side?

Answer 1

This is the intrinsic nature of how HTML and web dev works. It is naturally "responsive" and text will wrap at the width of its parent element. What I am hearing from you is you would like to keep from getting "widows" in your text. This is not an easy problem to fix in web-dev, but there are a few techniques I have found, most of them require a bit of manual attention which in a way is appropriate considering every instance can be unique.

If you have a precise layout you can set a width or max-width on the parent element, and use media queries to change it when needed.

HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.</p>
</div>

CSS

.parent {
    max-width: 288px;
}

@media (min-width: 600px) {
    .parent {
        max-width: 568px;
    }
} 

---

Another technique is to add a non-breaking space   between the last two words, effectively making them one word that will not wrap to a new line without the other. This looks a little bit better and can work well especially if they are short words.

HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra&nbsp;augue.</p>
</div>

---

Another technique is similar to the   but instead us a span and styles to achieve the same thing. This could be useful in a CMS editor or where you need to style the grouping or somewhere a non-breaking space won't work.

HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a <span class="nowrap">pharetra augue.</span></p>
</div>

CSS

.nowrap {
    white-space: nowrap;
}