Prescribing line break positions in CSS or HTML

Question

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>

Like this? http://stackoverflow.com/questions/14128787/discretionary-line-break-in-html — wanovak, Jul 21 '15 at 13:31
So I should replace all spaces with except the ones that could potentially be line breaks? — pgblu, Jul 21 '15 at 13:34
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, Jul 21 '15 at 13:39
Sorry - the text needs to be center-aligned.. I should have mentioned that, @DrewKennedy — pgblu, Jul 21 '15 at 13:41
This is going to be though as it _also_ depends on how the font is rendered which can make a pixel difference, etc... The closest solution would be `orphans` in CSS, but that's for lines... — somethinghere, Jul 21 '15 at 13:42

score 3 · Answer 1 · answered Jul 21 '15 at 13:45

3

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.

answered Jul 21 '15 at 13:45

Paulie_D

107,962
13
142
161

Actually, wouldn't it be easier to simply use one `span` at the end? The OP is only asking for the last word to not be orphaned. – somethinghere Jul 21 '15 at 13:46
1

On looking over the question it seems he want more than that. – Paulie_D Jul 21 '15 at 13:47
Yeah it's a solution, but having so many `span`s gets so unwieldy so quickly. Ah well, I like this solution. – somethinghere Jul 21 '15 at 13:47
1

True but it has the advantage (pretty much) of not requiring media queries. – Paulie_D Jul 21 '15 at 13:48
This is the best solution _imho_. – hungerstar Jul 21 '15 at 13:53

score 1 · Accepted Answer · answered Jul 21 '15 at 13:42

1

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

For example, you can put   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   tags manually. (by emulating all media query breakpoints) But you get the idea.

answered Jul 21 '15 at 13:42

Cafe Coder

944
9
14

1

Very hacky and will not make for easily editable or dynamic text. It should work, though. – somethinghere Jul 21 '15 at 13:44
@somethinghere I agree. I only use this method with (almost permanently) fixed text like a text block overlay for hero images and etc. – Cafe Coder Jul 21 '15 at 13:47
1

This is what I'm going to use. However, since the stripe has an id tag, its styling (#msgStripe > br) will take precedence over (br.md) unless the latter is written as (#msgStripe > br.md) – pgblu Jul 21 '15 at 14:12

score 0 · Answer 3 · answered Jul 21 '15 at 13:42

0

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

answered Jul 21 '15 at 13:42

Paul Redmond

3,276
4
32
52

The issue here is that different browser and operating systems render fonts differently. There is no way to know whether this will push to the last line or not. – somethinghere Jul 21 '15 at 13:45

score 0 · Answer 4 · answered Jul 21 '15 at 13:50

You could just put each "chunk" of your message in a  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)

Prescribing line break positions in CSS or HTML

4 Answers4