3

I am trying to display a set of words of same length in columns within a div. I am using the courrier new font. So far, so good.

However, some word contain '-', and they are broken (hyphenated) inappropriately. It breaks the layout:

enter image description here

Is there any way to prevent this with CSS (or JS)?

Jérôme Verstrynge
  • 57,710
  • 92
  • 283
  • 453

1 Answers1

5

text-align:justify will create odd spacing. It's not so much of an issue now because all of the words are the same length but I'd say a better solution would be to swap all of the hyphens with a non-breaking dash ‑

Demo: HTML

<div>
    <h1>With non-breaking hyphen</h1>    
    <br />   
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempo&#8209;r incid&#8209;idunt ut labore et dolore magna aliqua. Ut enim ad minim ve&#8209;niam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comm-odo
       consequat. Duis au-te irure dolor in repr&#8209;ehenderit in voluptate velit esse
    </p>         
</div> 
<div>
    <br />
    <h1>Without non-breaking hyphen</h1>  
    <br />               
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempo-r incid-idunt ut labore et dolore magna aliqua. Ut enim ad minim ve-niam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comm-odo
       consequat. Duis au-te irure dolor in repr-ehenderit in voluptate velit esse
    </p>  
</div>

CSS (this is just to force the wrapping)

div{
    width:300px;          
}

See it on JSFiddle:​ http://jsfiddle.net/beKfz/4/

Source: No line-break after a hyphen

Community
  • 1
  • 1
ShaunYearStrong
  • 230
  • 2
  • 9
  • 1
    The Courier New font does not contain NON-BREAKING HYPHEN, so using `‑` would in this case cause a glyph from some other font to be used, probably looking rather different from the normal hyphens in the text and probably being of width different from the width of Courier New glyphs. – Jukka K. Korpela Dec 12 '12 at 10:29
  • Jukka, absolutely, you are right, that's my next issue... lol – Jérôme Verstrynge Dec 12 '12 at 16:22
  • That's absolutely correct Jukka, This thread may be of some use to you@ http://stackoverflow.com/questions/8753296/how-to-prevent-line-break-at-hyphens-on-all-browsers it seems like a bit of a hard problem to crack. – ShaunYearStrong Dec 13 '12 at 10:22