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

의사 요소 콘텐츠 ::뒤 또는 ::앞에 줄 바꿈 추가

질문:

다음과 같은 경우 ::after 또는 ::before 의사 요소의 콘텐츠 속성에 여러 줄을 어떻게 추가합니까? 마크업에 대한 액세스는 CSS로 제한되어 있습니까?

답변:

'content' 속성을 사용하면 "A" 이스케이프 시퀀스를 사용하여 줄 바꿈을 삽입할 수 있습니다. 그러나 줄바꿈을 방지하려면 'white-space' 속성을 'pre' 또는 'pre-wrap'으로 설정하세요.

예:

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

보다 강력한 이스케이프를 위해서는 " 다음 코드에서 볼 수 있듯이 임의 입력을 처리하려면 "A" 대신 0000a"를 사용하세요.

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

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