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>

답변:

CSS 데이터 속성에 새 줄을 추가하는 것이 실제로 가능합니다. 그러나 제공된 예에서는 올바른 구문을 보여주지 않습니다. 원하는 결과를 얻으려면 다음 단계를 따르세요.

1. 데이터 속성 수정:

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

이 업데이트된 HTML에서 새 줄 문자(a)는 HTML 엔터티 로 대체됩니다. 이 엔터티는 콘텐츠에 새 줄을 만드는 줄 바꿈(LF) 문자를 나타냅니다.

2. CSS 조정:

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

CSS에서 다음 속성을 추가합니다.

• white-space: pre; 공백을 유지합니다. 새 줄을 포함한 콘텐츠.
• display: inline-block; 콘텐츠가 주변 텍스트의 흐름을 방해하는 것을 방지합니다.

이 수정된 CSS는 다음을 보장합니다. 새 줄을 포함하여 데이터 속성의 내용이 의도한 대로 표시됩니다.

위 내용은 CSS의 데이터 속성에 새 줄 문자가 포함될 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!