페이지에 HTML 또는 PHP에 액세스 할 수 없으며 CSS를 통해서만 편집 할 수 있습니다. 나는 사이트를 수정하고 ::after 또는 ::before 가짜 요소를 통해 텍스트를 추가하고 추가 된 내용 앞이나 뒤에 공백과 같은 이스케이프 유니 코드를 사용해야한다는 것을 발견했습니다.의사 요소 내용 뒤에 줄 바꿈을 추가하십시오.
content 속성에 여러 줄을 어떻게 추가합니까?
예에서 HTML 브레이크 라인 요소는 만 내가 달성하고자하는 것을를 시각화 : 찾을 수
#headerAgentInfoDetailsPhone::after
{
content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
content 속성 상태 :
상기 '콘텐츠'후의 문자열 중 하나의 탈출 시퀀스 "A를 \"속성을 기록함으로써 생성 된 콘텐츠의 개행을 포함그래서 당신은 사용할 수 있습니다저자 . 삽입 된 줄 바꿈은 여전히 'white-space'속성의 적용을받는 입니다. "\ A"이스케이프 문자열에 대한 자세한 내용은 "문자열"및 "문자 및 대소 문자"를 참조하십시오.
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
white-space: pre; /* or pre-wrap */
}
잠시 동안 나는 왜 "\ A'가 아닌'\ n'이 아니라고 생각했다. - 그 다음 줄 바꿈이'0x0A'임을 기억한다. :) –
인쇄 매체 질의로 이것을 시도했지만 작동하지 않는다. 버그입니까 아니면 기본 동작입니까? 인쇄 매체가 없으면 작동합니다. – harryfeng
'pre-wrap'을 보내 주셔서 감사합니다! '# headerAgentInfoDetailsPhone' **과 같은 블링크 엔진 웹 브라우저에서 더 이상 래핑되지 않는 문제가있었습니다 ** Firefox는 요소에 전파되는 'white-space : pre;'속성에 영향을받지 않습니다. –
같은 것을 물어 보인다 여기이 질문 : Newline character sequence in CSS 'content' property?이
의 모습을 당신은 \A 또는 \00000a을 사용하여 newline
니스 문서 explane 뭔가 당신이
Adding a line break between two inline elements
을 원하는 두 인라인 요소를 가질 필요가 있다면 어디 하나의 휴식에 다른 요소 안에있는 다음 줄은이 작업을 수행 할 수 있습니다. b Y는 의사 요소를 추가 : '\의 A'와 공백 : 콘텐츠를 한 후 나는 툴팁의 새로운 라인을 가지고했다
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를 다음에 추가해야만했다 : 이후 :
.tooltip:after {
width: 500px;
white-space: pre;
word-wrap: break-word;
}
단어 감싸기가 필요해 보인다.
또한 \ A는 표시 할 텍스트의 중간에서 새 행을 강제 실행하지 못했습니다.
근무했습니다.나는 다음과 같은 툴팁 얻을 수있었습니다 : 포스터가있다처럼 당신의 진술에 동의하는 동안
CSS 추가하거나 편집 내용에 대한 것이 아니라, 어떻게 내용이 표시 – underscore
@SamithaHewawasam을 제어하기위한입니다, 그것은 본다 HTML을 편집 할 수없는 상황에 처해있었습니다. 작고 단순한 컨텐츠 추가를 위해 이것이 왜 유용하고 필요한지 알 수 있습니다. –
가능한 [CSS 'content'속성의 줄 바꿈 문자 시퀀스?] (http://stackoverflow.com/questions/9062988/newline-character-sequence-in-css-content-property) – cimmanon