CODEWITHSUNDEEP
htmlcssline-breaks
pgblu
pgblu

Reputation: 702

Prescribing line break positions in CSS or HTML

The top of my website needs to have a center-justified 'message stripe' with the following important message: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis quibusdam illum a eius quia facilis ex, deserunt, molestiae hic recusandae in unde!"

However, when the user makes the window narrower, I don't want unde! to fall onto a line by itself. Rather, I want everything after eum omnis to snap to the second line. When it gets even narrower, I want breaks after elit. and after illum a eius instead.

I'm imagining that this will call for @media queries, but I'm not sure how to go about it.

http://codepen.io/pgblu/pen/xGagpR

CSS:

#msgStripe {
  padding: 8px 0;
  background: #11dd44;
  line-height: 28px; 
  text-align: center;
}

HTML:

<div id="msgStripe">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis quibusdam illum a eius quia facilis ex, deserunt, molestiae hic recusandae in unde!</div>

Upvotes: 0

Views: 403

Answers (4)

CodingWithSpike
CodingWithSpike

Reputation: 43728

You could just put each "chunk" of your message in a <span> and set those spans to white-space: nowrap;

The result is that the spans will be next to each other on the same line when they fit, but when too narrow an entire span will move to the next line together, instead of breaking up that part of the text.

.header-message {
  font-size: 8px;
  text-align: center;
  border: 1px solid black;
  padding: 8px;
}

.header-message span {
  white-space: nowrap;
}
<div class="header-message">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> <span>Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis quibusdam illum a eius</span> <span>quia facilis ex, deserunt, molestiae hic recusandae in unde!</span>
</div>

(run the above code snippet in "full page" mode and you will be able to resize your browser window to see how it works)

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115278

One option is to break the text up into multiple inline-block spans.

Codepen Demo

#msgStripe {
  padding: 8px 0;
  background: #11dd44;
  line-height: 28px; 
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: top;
}
<div id="msgStripe">
  <span>Lorem ipsum dolor sit amet,</span>
  <span> consectetur adipisicing elit.</span>
  <span>Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis</span>
  <span>
    <span> quibusdam illum a eius</span>
    <span> quia facilis ex, deserunt, molestiae hic recusandae in unde!</span>
  </span>
</div>

By layering the spans you can put the breaks pretty much wherever you want.

Upvotes: 3

Cafe Coder
Cafe Coder

Reputation: 934

The key is to put line breaks (<br> tags) in the text, and then manipulate the display property of said <br> tags with media queries.

For example, you can put <br> tags with classes like this:

Lorem ipsum <br class="md" /> dolor sit <br class="sm" /> amet

And use media queries to enable them

br {display:none;/*Initially disable line breaks*/}

@media(max-width:1200px) {
    br.md {display:inline;/*Enable br tags in screen width<=1200*/}
}

@media(max-width:767px) {
    br.sm {display:inline;/*Enable br tags in screen width<=767*/}
}

You will have to find the optimal position for placing <br> tags manually. (by emulating all media query breakpoints) But you get the idea.

Upvotes: 1

Paul Redmond
Paul Redmond

Reputation: 3296

There are some things with CSS - using white space for example. But as you're referring to the browser 'narrowing', you can use media queries to control the widths of the text at each media query. For example:

http://codepen.io/anon/pen/GJXrwX

@media screen and (max-width: 767px) {
  #msgStripe p{
    width: 600px;
    margin: 0 auto;
    line-height: 1.5em;
  }
}

Upvotes: 0

Related Questions