为什么连字符似乎不适用于字符 :before 和首字母大写 ::first-letter？答案

【问题标题】：Why doesn't hyphenation seem to work with character :before and drop cap ::first-letter?为什么连字符似乎不适用于字符 :before 和首字母大写 ::first-letter？
【发布时间】：2020-03-07 18:58:20
【问题描述】：

这是 html 部分的代码 sn-p：

<p class="chapter">Introduction</p>

对于以下 css，“简介”不与缩放或窗口大小调整连字符？

我不明白为什么连字符可以在任何地方使用：

body {
    -webkit-hyphens: auto;   /* manual (default), auto, none */
       -moz-hyphens: auto;
        -ms-hyphens: auto;
         -o-hyphens: auto;
           -hyphens: auto;
}

except 在以下 = 中带有字符 :before 和 ::first-letter code for drop caps ...

.chapter:before {
    display: inline;

 /*
    content:     '\00a7\00a0';    // § + non-breaking space //
 */
    content:     '§';
    /* don't need the above non-breaking space with this padding */
    padding-right: 0.3em;

    font-size:   1.4em;
    font-weight: bold;
    color:       #600;
}

/*
    https://css-tricks.com/snippets/css/drop-caps/
*/
.chapter + p::first-letter {
    float:         left;

    font-family:   Georgia, "Times New Roman", serif;
    color:         #903;
    font-size:     250%;

    line-height:   100%;      /* original = 1 */

    position:      relative;  /* tweaking the placement ... */
    top:           -.05em;
    padding-right: 0.06em;    /* original = 5px */
    padding-left:  0.00em;    /* original = 0px */
}

这里有一两张快照...

请注意，第一个不连字符，但第二个呢？？？

为了增加神秘感，如果我使用“Introduction q”，即>一个单词，连字有效，但not = one word？

谢谢大家...

【问题讨论】：

标签： css hyphenation

【解决方案1】：

代替：

body {
    -webkit-hyphens: auto;   /* manual (default), auto, none */
       -moz-hyphens: auto;
        -ms-hyphens: auto;
         -o-hyphens: auto;
           -hyphens: auto;
}

...使用这个：

body {
    -webkit-hyphens: auto;   /* manual (default), auto, none */
       -moz-hyphens: auto;
        -ms-hyphens: auto;
         -o-hyphens: auto;
           -hyphens: auto;

    overflow-wrap: break-word;  /* BINGO! */
    word-wrap:     break-word;         
}

仅归功于：

参考：https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/

【讨论】：