CSS의 데이터 속성을 사용하여 의사 요소 콘텐츠에 줄 바꿈을 어떻게 추가할 수 있나요?

CSS 및 의사 요소 콘텐츠의 데이터 속성에 새 줄 문자 할당

이 쿼리는 새 줄 문자를 CSS에 통합할 가능성을 탐색합니다. 데이터 속성. 사용자는 의사 요소의 content 속성과 data 속성에서 추출된 값을 사용하여 여러 줄의 콘텐츠를 표시하는 것을 목표로 합니다.

구현

초기 접근 방식은, 데이터 속성 내에서 "a"를 새 줄 문자로 활용하는 것은 성공하지 못한 것으로 판명되었습니다. 원하는 결과를 얻으려면 다음 수정이 필요합니다.

데이터 속성 수정:

• "a"를 "로 바꾸세요. "; 이 HTML 엔터티는 줄 바꿈 문자에 해당합니다.

CSS 수정 사항:

• content: attr(data-foo) ;: 데이터 속성을 표시하는 원래 기능을 유지합니다. content.
• background-color: black; white-space: pre; display: inline-block;: 콘텐츠가 형식을 유지하고 개별 블록으로 표시되는지 확인하세요.

최종 코드:

CSS:

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

HTML:

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

이 수정을 통해 의사 - 데이터에 정의된 대로 줄 바꿈을 유지하면서 여러 줄 내용을 표시하는 요소 속성입니다.

위 내용은 CSS의 데이터 속성을 사용하여 의사 요소 콘텐츠에 줄 바꿈을 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!