CSS를 사용하여 의사 요소 콘텐츠에 줄 바꿈을 추가하는 방법은 무엇입니까?

CSS를 사용하여 유사 요소 콘텐츠에 줄바꿈 추가

소개

텍스트 추가 시 HTML이나 PHP에 액세스하지 않고 CSS의 ::after 또는 ::before 의사 요소를 통해 필요성이 발생합니다. 여러 줄 내용에 줄 바꿈을 포함합니다. 이 문서에서는 CSS를 사용하여 이를 달성하는 방법을 설명합니다.

줄 바꿈 추가

콘텐츠 속성에 줄 바꿈을 추가하려면 "A" 이스케이프 시퀀스를 사용하세요. 그러나 삽입된 줄 바꿈에는 "white-space" 속성이 적용됩니다.

예

설명하려면 다음 코드를 고려하세요.

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

이렇게 하면 "XXXXX" 뒤에 줄 바꿈이 추가되고 내용이 표시됩니다. as:

Office: XXXXX
Mobile: YYYYY

대체 이스케이프 시퀀스

A를 사용할 때 예측할 수 없는 결과가 발생하는 경우 대신 0000a를 사용하는 것이 좋습니다. 이렇게 하면 임의의 문자열이 올바르게 이스케이프 처리됩니다.

이스케이프 함수 예

편의를 위해 다음 JavaScript 함수를 사용하여 임의의 텍스트를 이스케이프하고 CSS에 추가할 수 있습니다. 스타일 블록:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

위 내용은 CSS를 사용하여 의사 요소 콘텐츠에 줄 바꿈을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!