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

131

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

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

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

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
css 
— 엘크 디
소스
CSS는 컨텐츠를 추가하거나 편집하기위한 것이 아니라 컨텐츠를 표시하는 방법을 제어하기위한 것입니다.
— Underscore
14
@SamithaHewawasam 귀하의 진술에 동의하는 동안 포스터가 HTML을 편집 할 수없는 상황에있는 것으로 나타났습니다. 작고 간단한 콘텐츠 추가의 경우 이것이 왜 유용하고 필요한지 알 수 있습니다.
— Dryden Long
— cimmanon
2
— 사용자
3
또한 줄 바꿈은 내용 관련 형식보다 훨씬 형식 관련이 있다고 주장합니다. 줄 바꿈을 "볼"수있는 유일한 방법은 내용의 형식 변경을 관찰하는 것입니다.
— 등시성

답변:

251

본 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')} }"`;
}
— 떠돌아
소스
28
잠시 동안 나는 "왜 그렇게 \A하지 않겠는가"라고 생각했다 \n– 그 다음에 줄 바꿈은 다음 과 같다 0x0A:)
— Camilo Martin
인쇄 매체 쿼리로 시도했지만 작동하지 않습니다. 버그입니까 아니면 기본 동작입니까? 인쇄 매체가 없으면 작동합니다.
— harryfeng
1
언급 해 주셔서 감사합니다 pre-wrap! #headerAgentInfoDetailsPhone Chrome과 같은 Blink 엔진 웹 브라우저에서 더 이상 줄 바꿈하지 못하는 데 문제가있었습니다 . Firefox는 해당 white-space: pre;속성으로 다시 전파 되는 속성에 영향을받지 않습니다 .
— Sroo Stroobandt
28

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

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

하나가 다른 요소 내에서 다음 줄로 나뉘는 두 개의 인라인 요소가 필요한 경우 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;
}
— 밑줄
소스
11

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

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

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

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

 &#13;&#10;

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

여기에 이미지 설명을 입력하십시오

— 세드릭 니콜라스
소스
8

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

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

JS 피들

— 사친
소스
7

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

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>
스 니펫 확장

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

— 시몬
소스
2

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

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}
— 아샤 르 자파르
소스
0 
<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

.mbr 및 .dbr 클래스는 CSS를 사용하여 라인 브레이크 동작을 시뮬레이션 할 수 있습니다 디스플레이 : 테이블을 . 실제 <br />를 바꾸려는 경우에 유용합니다.

이 데모 Codepen 확인 https://codepen.io/Marko36/pen/RBweYY ,
및 반응 사이트 사용에 대한이 게시물 : 응답 행 구분을 : 시뮬레이션 <br /> 주어 중단 점에서 .

— 마르코 -36
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.