CSS 데이터 속성이 의사 요소를 사용하여 개행 문자를 렌더링할 수 있습니까?

CSS 데이터 속성, 줄 바꿈 문자 및 의사 요소 콘텐츠 값

CSS 데이터 속성 내에 줄 바꿈 문자를 통합하여 의사 요소를 사용하여 표시할 수 있도록 할 수 있습니까? ? 이 시나리오를 살펴보겠습니다.

다음 CSS 및 HTML 코드를 고려하세요.

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

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

이 시나리오에서 "a" 문자는 CSS에서 개행 문자로 예상되며, 원하는 결과를 얻지 못했습니다.

해결책:

원하는 동작을 얻으려면 다음과 같이 데이터 속성을 수정하십시오.

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

설명:

• 표기법은 HTML의 개행 문자를 나타냅니다.
• "white-space: pre;"를 통해 의사 요소에 공백 속성을 추가합니다. 스타일, 데이터 속성 내의 공백을 유지합니다.
• "display: inline-block;" 스타일을 사용하면 의사 요소가 여러 줄에 걸쳐 표시될 수 있습니다.
• 결과적으로 개행 문자를 포함한 데이터 속성의 콘텐츠가 예상대로 렌더링됩니다.

위 내용은 CSS 데이터 속성이 의사 요소를 사용하여 개행 문자를 렌더링할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!