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

Question

这是 html 部分的代码片段：

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

除了以下 = 带有字符 :before 和 ::first-letter 代码的首字母下沉...

.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”，即> one word，连字有效，但不是 = one word？

谢谢一堆和一堆...

标签： csshyphenation

Answer 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/