我正在尝试使断字正确工作。
<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
background: #fff;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.product-name {
width: 113px;
font-weight: 900;
color: #231f20;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
overflow: hidden;
font-family: "Chivo", sans-serif;
background-color: grey;
}
</style>
</head>
<body>
<div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>
</html>
这导致带有连字符的文本框如下所示：
我可以原谅某些单词连字符错误的情况，因为我了解到“ htmls”字典中并不总是存在某些单词。但是我发现奇怪的是，某些主题的连字符在段落中留有空白。在此示例中，这更有意义：
BIJZETTA-
FEL ASPEN
MET TIJD-
SCHRIFTEN-
REK
断字后，在“ MET”后面将留有足够的空间以放置“ TIJD-”。
我如何修复代码，以便在有足够空间的情况下，带连字符的音节自动在前面的单词后面继续？
最佳答案
基本问题是浏览器具有断字算法，并且您不能对其进行干预。浏览器将根据需要布置文本。 （当然，在MS Word，InDesign或任何其他文本软件中也是如此。只有使用适当的布局软件，您才能更好地控制文本属性。）
浏览器将“ TIJD-”移至下一行的原因是，对于浏览器所留的空间而言，它的宽度太小了，因此只能移动它。
您有两个选项可以更改文本的流动方式。首先是对元素宽度，字体大小或字体字距进行微调。 （您可以在整个文本中执行此操作，也可以使用span进行更改。）这将更改文本流背后的数学运算，并可能使您产生更美观的结果。
第二种方法是使用带有空格的硬空格（Â），稀疏空格（）或（作为真正的凸起）span且根本没有任何实际空格，以尝试强制浏览器根据需要布置文本。
但是，由于所有浏览器都不相同，因此无论选择哪种选项，您都无法保证结果。如果必须拥有正确的外观，则需要使用图像（但请不要忘记使用辅助功能）！