의사 요소 내용 앞에 :: after 또는 ::에 줄 바꿈 추가 통해서만 편집 할

페이지의 HTML 또는 PHP에 액세스 할 수 없으며 CSS를 통해서만 편집 할 수 있습니다. 사이트에서 수정을 수행하고 ::after또는 ::before의사 요소 를 통해 텍스트를 추가 했으며 이스케이프 유니 코드가 추가 된 내용 전후의 공백과 같은 항목에 사용해야한다는 것을 알았습니다.

content속성에 여러 줄을 어떻게 추가 합니까?

예를 들어 HTML 구분선 요소는 내가 달성하고자하는 것을 시각화 하는 것입니다.

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

답변

본 content숙소의 상태 :

작성자는 ‘content’속성 다음의 문자열 중 하나에 “\ A”이스케이프 시퀀스를 작성하여 생성 된 컨텐츠에 줄 바꿈을 포함 할 수 있습니다. 이 삽입 된 줄 바꿈은 여전히 ‘공백’속성의 적용을받습니다. “\ A”이스케이프 시퀀스에 대한 자세한 내용은 “문자열”및 “문자 및 대소 문자”를 참조하십시오.

따라서 다음을 사용할 수 있습니다.

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

http://jsfiddle.net/XkNxs/

그러나 임의의 문자열을 이스케이프 할 때는 새 행이 뒤에 오는 숫자 나 문자가 예측할 수없는 결과를 제공 할 수 있으므로 \00000a대신 대신 사용 하는 것이 좋습니다 .\A[a-f]

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

답변

기본 사항을 설명하는 유용한 기사 (단, 줄 바꿈은 다루지 않음).

놀라운 물건 의사 요소의 전체 무리가 할 수있는

하나가 다른 요소 내에서 다음 줄로 나뉘는 두 개의 인라인 요소가 필요한 경우 pseudo-element : after with content : ‘\ A’및 white-space : pre를 추가하여이를 수행 할 수 있습니다.

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

답변

툴팁에 새로운 줄이 있어야했습니다. 이 CSS를 : after에 추가해야했습니다.

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

자동 줄 바꿈이 필요한 것 같습니다.

또한 텍스트 중간에 \ A가 작동하지 않아 새 줄을 강제로 표시했습니다. 

 &#13;&#10;

일했다. 그런 다음 그러한 도구 설명을 얻을 수있었습니다.

답변

당신은 이것을 시도 할 수 있습니다

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

JS 피들

답변

‘새 줄 기호를 추가하는 의사 요소의 동적 내용 변경 방법’을 찾으려는 사람들을 위해 여기에 대한 답변이 있습니다.

HTML 문자 &#13;&#10;는 JavaScript를 사용하여 HTML에 추가 할 수 없습니다. 문서 렌더링에서 문자가 변경되기 때문입니다.

대신 U + 000D 및 U + 000A 인이 문자의 유니 코드 표현을 찾아서 다음과 같이 할 수 있습니다 

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);
div:before{
   content: attr(text);
   white-space: pre;
}
<div text='I want to break it in javascript, after comma sign'></div>
스 니펫 확장

희망이 누군가의 시간을 절약, 행운을 빌어 🙂

답변

에 줄 바꿈을 추가 ::after또는 ::before의사 요소 내용

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

답변

: 같은 일을 물어 보인다 여기이 질문을 찾을 CSS에서 줄 바꿈 문자 시퀀스 ‘내용’속성을?

당신이 사용 \A하거나 \00000a달성 할 수있는 것 같습니다newline