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;
}
The words are wrapped as I want them to, but the hyphen itself ("-") is not shown at the point where the word is wrapped.
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.
I also saved this code in the JS Bin.
Thank you!
1.) Don't use
word-break: break-all;– it breaks words at any position, regardless of hyphenation rules.2.) You need a
langattribute in thehtmltag in combination withhyphens: auto;to activate automatic hyphenation.3.) You can use a different
langattribute in any element that contain another language – see how I appliedlang="de"to the lastlielement below.