Travailler avec du texte en CSS : quelques problèmes et solutions

1. 히어로 섹션의 단락에 문제가 발생하지 않은 사람은 거의 없습니다. 이 문제를 해결하기 위해 많은 개발자는 별도의 div를 만들어 특정 너비를 할당하거나 단락에 직접 너비 또는 최대 너비를 적용합니다. 나는 ch 단위를 발견하기 전까지 동일한 작업을 수행했습니다. 이 장치는 문자 수를 계산하므로 한 줄에 원하는 문자 수를 지정할 수 있습니다.

아래 예에서는 Hero 섹션의 단락에 최대 너비가 64ch로 지정되어 있습니다(60~70자 권장). 추가 div가 필요하지 않습니다.

2. 제목에 한 단어만 다음 줄로 이동하거나 첫 번째 줄에 두 번째 줄보다 많은 텍스트가 포함되어 불균형해 보일 수 있는 경우가 있습니다. 우리는
이 문제를 해결하려면 태그를 지정하거나 너비를 조정하세요. 이 문제는 단락에서도 발생할 수 있습니다. 예를 들어 이전 예에서는 단락의 마지막 줄에 다른 줄보다 텍스트가 적습니다.

이 문제에 대한 깔끔한 해결책은 text-wrap: Balance;를 사용하는 것입니다. 다음 예에서는 단락의 각 줄에 대략 동일한 양의 텍스트가 포함되어 있습니다.

balance와 유사하게 text-wrap 속성에는 Pretty라는 또 다른 값이 있습니다. 단락이나 제목의 마지막 줄에 한 단어만 포함된 경우:

text-wrap 사용: 꽤; 마지막 줄의 외로운 단어에 다른 단어를 추가하므로 단독으로 사용되지 않습니다. 브라우저가 텍스트 줄 바꿈을 지원하는 동안: 균형; 꽤 좋은데 예쁘기엔 별로인거 아냐?

3. 텍스트 장식 속성은 활용도가 낮은 경우가 많습니다. 없음을 넘어 허용할 수 있는 다양한 값을 탐색하고 텍스트 장식이 실제로 네 가지 속성의 약어라는 점을 이해해 보겠습니다.

p {
    /*
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
}

텍스트 장식과 관련된 또 다른 흥미로운 속성은 text-underline-offset으로, 이를 통해 텍스트 장식 줄과 텍스트 사이에 공간을 만들 수 있습니다.

4. 때로는 블로그의 긴 텍스트를 링크하여 다음 줄로 넘어가는 경우가 많습니다. 이전 예에서처럼 연결된 텍스트에 배경색을 적용하면 다음 줄로 넘어갈 때 어색해 보일 수 있습니다.

제목에 배경색을 사용할 때도 이 문제가 발생하는 경우가 많습니다. 깔끔한 해결책은 box-Decoration-break: clone;을 사용하는 것입니다. 다음 예에서는 이전에는 어색해 보였던 링크된 텍스트가 이제 올바르게 표시됩니다.

5. 일부 문제가 가끔 지속되지만 이제 CSS에서 직접 텍스트 획을 사용할 수 있습니다. 예, 접두사가 필요하지만 더 이상 이전처럼 텍스트 그림자 트릭에 의존할 필요가 없습니다. 이는 상당한 개선입니다!

6. The last feature for today is line-clamp. It also requires a prefix, yet it's now widely used. This is commonly seen in cards for various blogs or articles. There are many ways to determine how many lines of text to show on a card. I used to control this using a custom data attribute and JavaScript, specifying the number of characters to display. However, this can be done more easily with line-clamp.

The code block below compiles all the topics discussed, making it convenient to search for and research other uses, browser support, and more.

p {
    max-width: 64ch;
    text-wrap: balance; /* or pretty */
    /**********************/
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    /**********************/
    /*
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
    box-decoration-break: clone;
    text-underline-offset: 3px;
}

h1 {
    -webkit-text-stroke-color: #333;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
}

That's all for today. Stay well, and goodbye!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!