英文:
Why the text is wrapped (hyphenated), but without hyphens shown
问题
这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ol class="meaning">
<li class="meaning-item">这是一个示例句子，其中长单词应该被连字符分隔
<ul class="sentences">
<li class="sentence">这是一个示例句子，其中长单词应该被连字符分隔</li>
<li class="translation">这是一个示例句子，其中长单词应该被连字符分隔</li>
</ul>
</li>
</ol>
</body>
</html>
.meaning {
list-style-type: none;
counter-reset: item;
font-size: calc(0.7em + 2.5vw);
word-break: break-all;
hyphens: auto;
}
.meaning > li {
position: relative;
}
.meaning > li::before {
content: counter(item);
counter-increment: item;
position: absolute;
top: 0;
text-align: center;
margin-left: calc(-0.7em - 2.5vw);
}
.sentences {
list-style-type: none;
padding-left: 0;
}
连字符已按预期包装，但连字符本身（"-"）没有显示在单词断开的位置。此外，我希望明确告诉浏览器<li class="sentence">中的文本是英语（en），而<li class="translation">中的文本是德语（de）。我知道并非所有浏览器都具有针对特定语言的内置连字符指令，但我想试试看。我还将这个代码保存在了JS Bin中。谢谢！
<details>
<summary>英文:</summary>
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ol class="meaning">
<li class="meaning-item">This is the example of the sentence where the long words should be hyphenated
<ul class="sentences">
<li class="sentence">This is the example of the sentence where the long words should be hyphenated</li>
<li class="translation">This is the example of the sentence where the long words should be hyphenated</li>
</ul>
</li>
</ol>
</body>
</html>
.meaning {
list-style-type: none;
counter-reset: item;
font-size: calc(0.7em + 2.5vw);
word-break: break-all;
hyphens: auto;
}
.meaning > li {
position: relative;
}
.meaning > li::before {
content: counter(item);
counter-increment: item;
position: absolute;
top: 0;
text-align: center;
margin-left: calc(-0.7em - 2.5vw);
}
.sentences {
list-style-type: none;
padding-left: 0;
}
<br>The words are wrapped as I want them to, but the hyphen itself ("-") is not shown at the point where the word is wrapped.<br><br> Besides, I want to *explicitly* tell the browser that text in `<li class="sentence">` is in English (en) and in `<li class="translation">` - in German (de). I know that not all browsers have built-in instructions for hyphening specific languages, but I want to give it a try.<br><br> I also [saved][1] this code in the JS Bin. <br><br>Thank you!
[1]: https://jsbin.com/nocuqeyeno/edit?html,css,output
</details>
# 答案1
**得分**: 0
1.) 不要使用 `word-break: break-all;` – 它会在*任何*位置断开单词，而不考虑连字符规则。
2.) 在 `html` 标签中需要一个 `lang` 属性，结合 `hyphens: auto;` 来启用自动连字符。
3.) 你可以在包含另一种语言的任何元素中使用*不同的* `lang` 属性 – 看我如何将 `lang="de"` 应用于下面的最后一个 `li` 元素。
<details>
<summary>英文:</summary>
1.) Don't use `word-break: break-all;` – it breaks words at *any* position, regardless of hyphenation rules.
2.) You need a `lang` attribute in the `html` tag in combination with `hyphens: auto;` to activate automatic hyphenation.
3.) You can use a *different* `lang` attribute in any element that contain another language – see how I applied `lang="de"` to the last `li` element below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.meaning {
list-style-type: none;
counter-reset: item;
font-size: calc(0.7em + 2.5vw);
hyphens: auto;
}
.meaning > li {
position: relative;
}
.meaning > li::before {
content: counter(item);
counter-increment: item;
position: absolute;
top: 0;
text-align: center;
margin-left: calc(-0.7em - 2.5vw);
}
.sentences {
list-style-type: none;
padding-left: 0;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ol class="meaning">
<li class="meaning-item">This is the example of the sentence where the sophisticated extraordinariliy long words should be hyphenated
<ul class="sentences">
<li class="sentence">This is the example of the sentence where the long words should be hyphenated</li>
<li class="translation" lang="de">Das ist ein Beispiel für einen Satz, der außergewöhnlich überlange Wörter enthält, welche am Zeilenende bei Bedarf geteilt werden sollen.</li>
</ul>
</li>
</ol>
</body>
</html>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论