如何防止html div中的单词破解（连字符）？

Question

我试图在div中的列中显示一组长度相同的单词。我正在使用courrier新字体。到目前为止，非常好。

然而，某些单词包含' - '，并且它们被不恰当地断开（连字符）。它打破了布局：

有没有办法用CSS（或JS）来防止这种情况？

Answer 1

text-align:justify将创建奇数间距。这不是一个问题，因为所有的单词都是相同的长度，但我会说更好的解决方案是将所有的连字符与非破坏的短划线交换‑

演示： 的 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（这只是为了强行包装）

div{
    width:300px;          
}    

在JSFiddle上看到它： http://jsfiddle.net/beKfz/4/

来源： No line-break after a hyphen