Das ist der 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">这是一个示例句子，其中长单词应该被连字符分隔
<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;
}
Das Wort ist so umbrochen, wie ich es möchte, aber der Bindestrich selbst („-“) wird nicht an der Stelle angezeigt, an der das Wort umgebrochen wird.
Außerdem möchte ich dem Browser explizit mitteilen 中的文本是英语（en），, dass der darin enthaltene Text auf Deutsch (de) ist. Ich weiß, dass nicht alle Browser integrierte Anweisungen für Bindestriche für bestimmte Sprachen haben, aber ich wollte es versuchen.
Ich habe diesen Code auch im JS Bin gespeichert.
Vielen Dank!
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>