How to hyphenate a capital word with CSS?

Question

I have one word I need to hyphenate, however in lang=en hyphenate: auto does not work on capital words.

So in js I used the slice function to slice the word in half so the second half that needs hyphenating no longer counts as a capital word.

However this solution works on Chrome but not Firefox.

I know German allows hyphenation of capital letters but I want to avoid changing the language.

Here is an example code snippet

let word = 'Exceptional'

<div>
<span class='hyphenate'>
{word.slice(0,1)}
{word.slice(1)}
<span>
<div>


.hyphenate {
display: 'flex'
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

In this code segment, if the div is too small, the word 'Exceptional' will be hyphenated automatically on every browser except Firefox.

Answer 1

I think that the CSS property that you are looking for is "hyphens" instead of "hyphenate". So try:

.hyphenate {
display: flex;
hyphens: auto;
}

Try also to add these properties to maximize compatibility as this reference explains:

.hyphenate {
display: flex;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}