3

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.

bad_coder
  • 11,289
  • 20
  • 44
  • 72
ggggg
  • 39
  • 1
  • 3
  • 2
    Could you put up a small example of the code (see https://stackoverflow.com/help/minimal-reproducible-example) - I think you'll need to use CSS to convert the word but I'm not sure without seeing your particular use case. – A Haworth Apr 20 '22 at 06:24
  • Please provide enough code so others can better understand or reproduce the problem. – Community Apr 20 '22 at 06:37
  • 1
    What's a "capital word,"? I'm assuming a proper noun (name), so "Bratislava," or "Chadhawarasamy" (to attempt to give examples of longish names). – David Thomas Apr 20 '22 at 07:34
  • I have added a code example – ggggg Apr 20 '22 at 08:12
  • 1
    I don't see a runnable snippet in your question. – A Haworth Apr 20 '22 at 11:04

1 Answers1

-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;
}
Alejandro Suárez
  • 148
  • 1
  • 7
  • Thanks for your answer, but I have made a typo. I used hypens: auto. So it works on chrome but not FF. – ggggg Apr 20 '22 at 08:34
  • According to https://www.w3.org/TR/css-text-3/#hyphenation "a UA might try to avoid hyphenation in proper nouns by excluding words matching certain capitalization and punctuation patterns". IE, bad_coder is trying to create a workaround for what is essentially the browser not allowing hyphens when words are capitalized (or all UPPERCASE). – Gray Ayer Dec 30 '22 at 22:21