How to prevent word breaking (hyphenation) in html div?

css, html, hyphenation

Solution

`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

Problem

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: Is there any way to prevent this with CSS (or JS)?

Original source

Related problems