Hyphen causing a line break in HTML

Question

I want to make sure that the date 2012-13-12 always ends up on one line. If I use / as a date separator it works but the '-'-sign (not very surprised) makes the date end up on two rows.

<div class="someclass">
      around  lorem Ipsium lorem Ipsium 2012-13-12 lorem Ipsium lorem Ipsium 
</div>

and

.someclass { width:40mm; }

http://jsfiddle.net/yjK6D/

Any suggestions?

Is the problem that it causes a line break or that it does *not* cause a line break? The title says one but the question text says other. — JJJ, Dec 16 '13 at 10:32
I miss the line break. The date ends up on two rows if it is to the right in the 40 mm area — Sven Persson, Dec 16 '13 at 10:34
"I miss the line break" doesn't make sense, but I'll interpret the rest so that you *don't* want the line break there. — JJJ, Dec 16 '13 at 10:35

score 6 · Answer 1 · answered Dec 16 '13 at 10:38

6

use css with "white-space:nowrap;"

or (older method) use tag "nobr" example 1:

<style type='text/css'>
    .nobr { white-space:nowrap; }
</style>
<div>
around  lorem Ipsium lorem Ipsium  around  lorem Ipsium lorem Ipsium <span class='nobr'> 2012-13-12 </span>lorem Ipsium lorem Ipsium 
</div>

example two:

<div>
    around  lorem Ipsium lorem Ipsium  around  lorem Ipsium lorem Ipsium <nobr> 2012-13-12 </nobr>lorem Ipsium lorem Ipsium 
</div>

answered Dec 16 '13 at 10:38

Guy Dafny

1,709
1
14
25

1

Good opportunity to use HTML5 `` here, too – JJJ Dec 16 '13 at 10:40
I believe that the tag is depricated, so the first example is a much better solution than the second – SpoonMeiser Dec 16 '13 at 11:28
There’s no need to include spaces into the `span` element. – Jukka K. Korpela Dec 16 '13 at 12:03
You are right, it was for the example. – Guy Dafny Dec 16 '13 at 12:13

Hyphen causing a line break in HTML

1 Answers1