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

의사 요소 콘텐츠에 줄 바꿈 통합

:after 또는 ::before 의사 요소의 콘텐츠 속성에 여러 줄 추가 가독성과 서식을 향상시킬 수 있습니다. 그러나 CSS를 통해서만 이 작업을 실행하는 것은 어려운 일입니다.

"A" 이스케이프 시퀀스 사용

콘텐츠 속성 문서에서는 "A" 이스케이프 시퀀스를 사용하여 다음을 수행할 것을 제안합니다. 생성된 콘텐츠 내에 줄바꿈을 포함합니다. 이 삽입된 줄 바꿈은 '공백' 속성을 따릅니다.

해당 적용을 설명하기 위해 다음 예를 고려하십시오.

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

이 코드는 "Office" 사이에 줄 바꿈을 추가합니다. 콘텐츠의 형식을 여러 줄로 지정하는 '모바일' 텍스트입니다. http://jsfiddle.net/XkNxs/에서 라이브 데모를 확인하세요.

주의 사항

임의 문자열을 이스케이프 처리할 때는 "A" 대신 "0000a"를 사용하세요. 숫자 또는 16진수 값과 유사한 후속 문자로 인해 발생하는 예측할 수 없는 결과를 방지합니다. 이를 안전하게 달성하기 위한 예제 함수:

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

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