如何防止html div中的断字（断字）？

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

但是，有些单词包含“-”，并且它们被不适当地打断（连字符）。它打破了布局：

---

有什么方法可以通过CSS（或JS）防止这种情况

文本对齐：对齐将创建奇数间距。现在这不是什么大问题，因为所有单词的长度都相同，但我认为更好的解决方案是用不间断的破折号替换所有连字符

演示：
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>     

请在JSFIDLE上查看：​

资料来源：
Courier新字体不包含不间断连字符，因此使用
和#8209会导致使用其他字体的字形，可能看起来与文本中的普通连字符有很大不同，并且可能与Courier新字形的宽度不同。Jukka，绝对正确，这是我的下一个问题。。。哈哈，这是绝对正确的，Jukka，这条线可能对你有用@这似乎是一个很难破解的问题。
div{
    width:300px;          
}