css - 如何在单词的断点处放置破折号？

Question

当我的单词比我的容器长时，我使用“word-break: break-all;”。我想知道是否可以将破折​​号（-）放在单词的断点处？

这是我用于文本的 css：

p{    
-ms-word-break: break-all;
 word-break: break-all;

-webkit-hyphens: auto;
-moz-hyphens: auto;
    hyphens: auto;
}

http://fiddle.jshell.net/L18c813r/1/

Answer 1

你需要全套：

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

问题是它们没有完整的浏览器支持。在 IE、Firefox 或 Safari 中进行测试。

不过，您可以使用一个 javascript 库来解决这个问题。它被称为Hypenator。http://mnater.github.io/Hyphenator/

Answer 2

另一种方法是在可以换­行的单词中使用。

对于这种方法，您需要指定可能的“to-long-words”并手动添加 html-tag。

另请参阅此 Stackoverflow 答案