Question

我需要使用css在break字上添加自动连字符。我使用bellow 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添加连字符

Answer 1

尝试在自动

中使用连字符

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

可以找到一个例子here。我认为这不适用于Chrome

Answer 2

您可以查看this

PS：它在IE9或更低版本的Chrome中不起作用，适用于IE10或更高版本。

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

Answer 3

您可以尝试使用softhyphen（）。这将在您需要时自动显示连字符。但缺点是你必须在内容中添加它。这是比制作连字符更好的方法：在所有浏览器中自动工作

实施例： https://jsfiddle.net/karthick6891/bma7qr7v/

<p> Lorem ipsum dolor sit amet, consectetur adip&shy;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>

寻找＆＃39; adipiscing＆＃39;在第一句

Answer 4

正如其他答案中所提到的，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>

如何使用css在break字中添加自动连字符

4 个答案: