CSS를 사용하여 여러 줄의 데이터 속성 콘텐츠를 새 줄로 표시하는 방법은 무엇입니까?

새 줄을 사용하여 데이터 속성 및 의사 요소 콘텐츠 조작

CSS에서는 attr() 함수를 사용하여 데이터 속성에서 값을 검색하고 다음과 같이 표시할 수 있습니다. 의사 요소를 사용하는 콘텐츠. 그러나 이러한 데이터 속성 내에 새 줄을 통합하는 것은 어려울 수 있습니다.

문제: 데이터 속성의 새 줄 문자

다음 코드 예제를 고려하세요.

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

CSS에서 새 줄 문자를 나타내는 "a" 이스케이프 시퀀스를 사용함에도 불구하고 data-foo 속성 내의 콘텐츠는 한 줄에 유지됩니다.

해결책: 향상된 데이터 속성 구문 및 공백 구성

여러 줄 데이터 속성을 활성화하려면 다음과 같이 구문을 수정하세요.

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

<div data-foo='First line &amp;#xa; Second Line'>foo</div>

이 수정 버전에서는:

• white-space: pre; : 새 줄을 포함하여 데이터 속성 내의 공백 문자를 유지합니다.
• display: inline-block;: 텍스트 줄 바꿈을 방지하고 콘텐츠가 여러 줄에 흐르도록 허용합니다.
• ;: 줄 바꿈을 위한 HTML 엔터티.

위 내용은 CSS를 사용하여 여러 줄의 데이터 속성 콘텐츠를 새 줄로 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!