我正在尝试让断字功能正常工作。
<!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 对违规部分执行此操作。)这将改变文本流背后的数学原理，并可能让您产生更美观的结果。
第二种是使用硬空格 ( )、细空格 ( ) 或(作为真正的 bodge)带有填充且根本没有真正空格的 span 来尝试并强制浏览器根据需要布置文本。
但是，因为所有浏览器都不同，所以无论您选择什么选项，您都无法保证结果。如果获得正确的外观至关重要，则需要使用图像(但如果这样做，请不要忘记可访问性)!
关于javascript - 如何在不在段落中产生间隙的情况下正确连接字符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56249964/