2009-11-04 6 views
67

<br />을 특정 클래스에 추가하려고합니다. : after 가상 클래스를 사용하면 단순히 <br />을 텍스트로 표시합니다.: after 의사 요소에 줄 바꿈을 추가 할 수 있습니까?

이 방법을 사용할 수 있습니까?

브라우저 문제는 IE8 용이므로 내부적으로 문제가되지 않습니다. 내가 할 경우

<span class="linebreakclass">cats are</span> brilliant 

"새로운"줄에 "brilliant"를 표시하고 싶습니다.

+1

[CSS 콘텐츠를 사용하여 HTML 항목 추가하기] (http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content) 다른 답변을 원하지만 그것도 작동하지 않습니다 ... – roryf

+0

참조 : https://css-tricks.com/pseudo-element-roundup/ – gibberish

답변

68

당신은 HTML 태그를 렌더링 할 수 없습니다하지만이 같은 스타일을 설정할 수 있습니다

.needs-space:after 
{ 
    content: " "; 
    display: block; 
    clear: both; /* if you need to break floating elements */ 
} 

여기에 주요 설정은 display: block; 인이 를 렌더링 :을 한 후 내용은 DIV 안에 있습니다. 그리고이 의사 요소는 모든 최신 브라우저에서 지원됩니다. IE를 포함합니다. 이 말을하면 사용자와 브라우저에 대해 잘 알고 있어야합니다. 이 방법은 content 속성에 대한 CCS 2.1 Specification에 언급 된

.new-line:after { 
    white-space: pre-wrap; 
    content: "\A"; 
} 

:

+0

완벽하게 작동합니다, 감사합니다. 그것은 내부 소프트웨어 프로젝트 및 모든 컴퓨터 IE8을 실행하는 그래서 난 복잡한 CSS를 사용하여 상관 없어 :) – NibblyPig

1

IE6 (그리고 아마도 다른 브라우저들도)에서는 after : 클래스가 작동하지 않습니다.

여기 실제로 원하는 것은 간격을 제공하기 위해 요소 맨 아래에 여백이 있다고 생각합니다.

간단히

.myElement { 
    margin-bottom: 1em; 
} 
+0

설명을 위해 편집 - 마진이 그렇게 할 것이라고 생각하지 않습니까? – NibblyPig

+0

나는보고 - 내 대답은 질문의 첫 번째 수정에만 적용 –

10

당신은 줄 바꿈으로 렌더링 \A 이스케이프 시퀀스를 사용할 수 있습니다

생성에 줄 바꿈을 포함 할 수있다

저자 콘텐츠 "\A"'content' 속성 뒤에 문자열 중 하나에 이스케이프 시퀀스를 작성하여 이 삽입 된 줄 바꿈은 여전히 ​​ 'white-space' 속성의 영향을받습니다.

관련 문제