我需要使用 css 在断词上添加自动连字符。我已经使用波纹管 css 添加连字符，但它不起作用
width: 150px; border: solid 1px black;
-ms-word-break:break-all;
word-break:break-all;
word-break:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
hyphens:auto;
我需要为 Mozilla Firefox 53.0.3 和 Google chrome 添加连字符
【问题讨论】：
正如其他答案中提到的那样，Chrome 的合作并不好。 CanIUse 表示它仅适用于 Mac OS 和 Android 下的 Chrome。不管是什么原因。
在其他浏览器中，它可以正常工作，至少在条件合适的情况下。其他答案中没有提到的一件事是它取决于语言！
因此，请确保将文档（或段落）的语言设置为可连字词将使用的语言。
.words {
width: 150px; border: solid 1px black;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}<p class="words" lang="en-US"> <!-- See? -->
In orbital mechanics, the Hohmann transfer orbit is an orbital maneuver
using two engine impulses which, under standard assumptions, move a
spacecraft between two coplanar circular orbits.
</p>【讨论】：
尝试在 auto 中使用连字符
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
可以在here 找到一个示例。我认为这在 Chrome 上不起作用
【讨论】：
你应该看看this
PS：在 IE9 或更低版本的 chrome 中无法使用，在 IE10 或更高版本中可以使用。
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
【讨论】：
您可以尝试使用软连字符 (&shy;)。当您需要它们时，它将自动显示连字符。但缺点是您必须将其添加到内容中。这比让 hyphen:auto 在所有浏览器中工作更好的方法
示例： https://jsfiddle.net/karthick6891/bma7qr7v/
<p> Lorem ipsum dolor sit amet, consectetur adip­iscing elit. Suspendisse ullamcorper metus in lorem dapibus pellentesque. Mauris maximus, diam non euismod tristique, sem sem scelerisque risus, eget cursus dolor turpis eget massa. Morbi congue non velit vel congue. Suspendisse sit amet sapien a nisi tempus pellentesque. Integer eleifend justo dignissim, mollis neque quis, maximus lorem. Vestibulum ut purus sed neque venenatis ullamcorper. Suspendisse potenti. Aenean lobortis commodo sem id varius. Nulla facilisi. Nulla varius sagittis magna ac accumsan. Nunc euismod aliquam erat, ut fringilla odio sodales vitae. Curabitur pellentesque erat ut risus aliquam, convallis vulputate ex vestibulum. Integer a volutpat ex </p>
在第一句话中寻找单词“adipiscing”
【讨论】：