这是代码：
<!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;
}
单词被按照我想要的方式换行，但是连字符本身（“-”）没有显示在单词换行的位置。
此外，我想要明确地告诉浏览器中的文本是英语（en），中的文本是德语（de）。我知道并非所有浏览器都有针对特定语言的连字符内置指令，但我想试一试。
我还将此代码保存在JS Bin中。
谢谢！
1.) 不要使用
word-break: break-all;- 它会在任意位置断开单词，而不考虑连字符规则。2.) 在
html标签中使用lang属性和hyphens: auto;结合起来，以启用自动连字符。3.) 您可以在包含其他语言的任何元素中使用 不同的
lang属性 - 请看下面我如何将lang="de"应用于最后一个li元素。.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; }<!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">这是一个例子，其中复杂的非常长的单词应该被连字符分隔 <ul class="sentences"> <li class="sentence">这是一个例子，其中长的单词应该被连字符分隔</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>