[css] CSS를 사용하여 요소 앞에 줄 바꿈을 삽입하는 방법

Program / 글쓴이

CSS 내용 속성을 사용하여 요소 앞에 줄 바꿈 태그를 삽입하는 방법을 본 것 같습니다. 분명히 이것은 작동하지 않습니다.

#restart:before { content: '<br/>'; }

그러나 당신은 이것을 어떻게합니까?

답변

유사 요소 생성 컨텐츠에서 \A 이스케이프 시퀀스 를 사용하는 것이 가능 합니다. CSS2 사양에서 자세히 읽어보십시오 .

#restart:before { content: '\A'; }

또한 추가해야 할 수 있습니다 white-space:pre;로 #restart.

참고 : \A줄의 끝을 나타냅니다.

ps 또 다른 치료법 

:before { content: ' '; display: block; }

답변

경우 #restart인라인 요소 (예 <span>, <em>등) 당신은 사용하여 블록 요소로를 설정할 수 있습니다 :

#restart { display: block; }

이것은 요소 앞뒤에 줄 바꿈을 보장하는 효과가 있습니다.

줄 바꿈 같은 역할을 무엇인가를 삽입 CSS를 할 수있는 방법이 없습니다 유일한 요소 전과 후가 아니라이. 다른 변경의 부작용으로 float: left, 또는 clear: left플로팅 된 요소 이후에 줄 바꿈을 일으킬 수도 있고 , 심지어 미친 것처럼 보일 수도 #restart:before { content: 'a load of non-breaking spaces'; }있지만 일반적인 경우에는 좋은 생각이 아닙니다.

답변

이것은 나를 위해 작동합니다 :

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

답변

이전 의사 요소 내에 유니 코드 개행 문자를 넣으십시오.

#restart:before { content: '\00000A'; }

답변

다음 CSS가 나를 위해 일했습니다.

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

답변

원하는 방식으로 CSS를 통해 생성 된 컨텐츠를 추가 할 수없는 두 가지 이유가 있습니다.

  1. 생성 된 컨텐츠는 컨텐츠를 승인하고 마크 업하지 않습니다. 마크 업은 평가되지 않고 표시 만됩니다.

  2. :before및 :after생성 콘텐츠는 너무도 공백이나 편지를 추가하고로 정의하는 요소 내에 추가 block작동하지 않습니다.

::outside원하는 것을 할 수 있는 의사 요소가 있습니다. 그러나 브라우저를 지원하지 않는 것 같습니다. (여기에서 더 읽으십시오 : http://www.w3.org/TR/css3-content/#wrapping )

가장 좋은 방법은 여기에 약간의 jQuery를 사용하는 것입니다.

$('<br />').insertBefore('#restart');

예 : http://jsfiddle.net/jasongennaro/sJGH9/1/

답변

그렇습니다. 완전히 할 수는 있지만 완전히 해킹입니다 (사람들은 그러한 코드 작성에 대한 더러운 표정을 줄 수 있습니다).

HTML은 다음과 같습니다.

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

CSS는 다음과 같습니다.

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

바이올린은 다음과 같습니다.
http://jsfiddle.net/AprNY/