Почему перенос слов не работает с символом: before и drop cap :: first-letter? - PullRequest
Новая
       65

Почему перенос слов не работает с символом: before и drop cap :: first-letter?

0 голосов
/ 07 марта 2020

Вот фрагмент кода для части 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- буквенный код для заглавных букв ... 

.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 */
}

Вот снимок или два ...

enter image description here

enter image description here

Обратите внимание, что 1-й не переносит, а 2-й делает ???

Чтобы добавить к тайне, если я использую «Введение q», то есть > одно слово , перенос слов работает, но не = одно слово ?

Спасибо, сгустки и сгустки ...

1 Ответ

0 голосов
/ 07 марта 2020

Вместо: 

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/

...