提问人：jiggy1965 提问时间：5/22/2019 最后编辑：jiggy1965 更新时间：5/24/2019 访问量：73
如何在不造成段落间隙的情况下正确催眠？
How do I hypenate correctly without creating gaps in paragraphs?
问：
我正在尝试让连字符正常工作。
<!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-”放在它后面。
如何修复代码，以便在有足够的空间时，连字符音节自动继续在前面的单词后面？
答：
1赞
JohnP
5/24/2019
#1
基本问题是浏览器有一个连字符算法，你不能干扰它。浏览器将根据需要对文本进行布局。（当然，在 MS Word、InDesign 或任何其他文本软件中也是如此。只是使用适当的布局软件，您可以更好地控制文本属性。
浏览器将“TIJD-”移动到下一行的原因是，对于浏览器剩余的空间来说，它太宽了，无法放置文本，因此它别无选择，只能移动它。
有两个选项可用于更改文本的流动方式。第一种是对元素宽度、字体大小或字体字距调整进行微小调整。（您可以在整篇文章中执行此操作，也可以仅使用 .这将改变文本流背后的数学运算，并可能让您产生更美观的结果。span
第二种是使用硬空格 （ ）、细空格 （ ） 或（作为真正的 bodge）s 带填充而根本没有真正的空格，以尝试强制浏览器根据需要布局文本。span
但是，由于所有浏览器都不同，因此无论您选择什么选项，您都无法保证结果。如果必须获得正确的外观，则需要使用图像（但如果您这样做，请不要忘记可访问性）！
0赞
jiggy1965
5/24/2019
#2
奇怪的是，我发现通过注释掉“overflow： hidden”并将“display： table”添加到 product-name 类中，我得到了我想要的东西。删除“溢出：隐藏”使音节很好地移动到前面的单词后面。当我转到另一个浏览器窗口时，由于某种原因，这些音节再次向下移动，但这已通过添加“display： table”修复。生成的代码如下。导致上述良好的结果。不知道为什么这会起作用，但 css 有时会神秘地起作用：-）
<!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;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.product-name {
/* added display: table*/
display: table;
width: 113px;
height: 300px;
font-weight: 900;
color: #231f20;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
font-family: "Chivo", sans-serif;
/*overflow: hidden;*/
background-color: grey;
}
</style>
</head>
<body>
<div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>
</html>
评论