Prescribing line break positions in CSS or HTML

0
votes

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>
4
htmlcssline-breaks
Like this? stackoverflow.com/questions/14128787/… – wanovak
So I should replace all spaces with &nbsp; except the ones that could potentially be line breaks? – pgblu
Do not use &nbsp;. – hungerstar
What about a media query to introduce additional padding to the right? That will ensure unde! never falls on a new line on its own. – Drew Kennedy
Sorry - the text needs to be center-aligned.. I should have mentioned that, @DrewKennedy – pgblu

4 Answers

3
votes

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.

1
votes

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.

0
votes

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

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)