CSS

Control line breaks for responsive design

A common wish I have when designing cover and landing pages is to break my headlines at different places for different devices and screen sizes. Say you have the following headline that you wish to break at different media widths:

Our New Thingamabob Is The Best Thing Since Sliced Bread!

For narrow screens such as phones, you want four lines:

Our New
Thingamabob
Is The Best Thing
Since Sliced Bread!

For medium-sized screens such as tablets, three lines:

Our New Thingamabob
Is The Best Thing
Since Sliced Bread!

For larger screens such as desktops, you'd break twice:

Our New Thingamabob Is The
Best Thing Since Sliced Bread!

By letting the browser automatically break the line, it will result in the following:

Our New Thingamabob Is The Best Thing Since Sliced Bread!

With a little bit of CSS and media queries, we can fulfill our exact need:

Our New
Thingamabob
Is
The Best Thing
Since Sliced Bread!

The solution I came up with is probably not the cleanest/simplest, however it gives me absolute full control over line breaks in my headlines:

<h1>
    Our New
    <br class="line-break line-break--sm-and-below"> <!-- line break for small devices and below -->
    Thingamabob
    <br class="line-break line-break--md-and-below"> <!-- line break for medium-sized devices and below -->
    Is
    <br class="line-break line-break--lg-and-up"> <!-- line break for large devices and up -->
    The Best Thing
    <br class="line-break line-break--md-and-below"> <!-- line break for medium-sized devices and below -->
    Since Sliced Bread!
</h1>

And below is the CSS code:

.line-break { display: inline; }

/*Extra small devices (portrait phones)*/
@media (max-width: 575.98px) {
    .line-break--sm-and-up,
    .line-break--md-and-up,
    .line-break--lg-and-up,
    .line-break--xl-and-up,
    .line-break--sm,
    .line-break--md,
    .line-break--lg,
    .line-break--xl { display: none; }
}

/*Small devices (landscape phones)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .line-break--md-and-up,
    .line-break--lg-and-up,
    .line-break--xl-and-up,
    .line-break--xs-and-below,
    .line-break--xs,
    .line-break--md,
    .line-break--lg,
    .line-break--xl { display: none; }
}

/*Medium devices (tablets)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .line-break--lg-and-up,
    .line-break--xl-and-up,
    .line-break--xs-and-below,
    .line-break--sm-and-below,
    .line-break--xs,
    .line-break--sm,
    .line-break--lg,
    .line-break--xl { display: none; }
}

/*Large devices (desktops)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .line-break--xl-and-up,
    .line-break--xs-and-below,
    .line-break--sm-and-below,
    .line-break--md-and-below,
    .line-break--xs,
    .line-break--sm,
    .line-break--md,
    .line-break--xl { display: none; }
}

/*Extra large devices (large desktops)*/
@media (min-width: 1200px) {
    .line-break--xs-and-below,
    .line-break--sm-and-below,
    .line-break--md-and-below,
    .line-break--lg-and-below,
    .line-break--xs,
    .line-break--sm,
    .line-break--md,
    .line-break--lg { display: none; }
}

Comments

Comments including links will not be approved.