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

Question

我试图在 div 的列中显示一组相同长度的单词。我正在使用快递新字体。到现在为止还挺好。

但是，某些单词包含“-”，它们被不恰当地破坏（连字符）。它打破了布局：

有什么办法可以通过 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/

资料来源： 连字符后没有换行符