html - 如何用 CSS 连接大写单词？

Question

我有一个词需要断字，但是在 lang=en 中 hyphenate: auto 不适用于大写单词。

所以在 js 中我使用 slice 函数将单词切成两半，这样需要连字符的后半部分就不再算作大写单词了。

但是，此解决方案适用于 Chrome 而不是 Firefox。

我知道德语允许大写字母连字符，但我想避免更改语言。

这是一个示例代码片段

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;
}

在此代码段中，如果 div 太小，“Exceptional”一词将在除 Firefox 之外的所有浏览器上自动连字符。

Answer 1

我认为您正在寻找的 CSS 属性是“hyphens”而不是“hyphenate”。所以尝试:

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

也尝试添加这些属性以最大化兼容性 as this reference explains:

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