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

170

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

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

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

css

— 챙겨
소스

2

CSS는 컨텐츠를 추가하거나 편집하기위한 것이 아니라 컨텐츠를 표시하는 방법을 제어하기위한 것입니다.

— Todd Moses

40

레이아웃과 흐름 (줄 바꿈도 고려할 수 있음)이 CSS 도메인 내에 확실히있는 것 같습니다.

— Trevor

12

CSS는 테마의 일부인 일관된 스타일링 요소 인 경우 컨텐츠를 추가하거나 편집하는 데 절대적으로 사용 됩니다. 특히 Wordpress와 같은 컨텐츠 관리 시스템에서는 컨텐츠를 편집 할 수 없으므로 매우 유용합니다. 이것이 "content"속성이 존재하는 이유입니다. 컨텐츠 추가 및 / 또는 편집

— Fei Lauren

266

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

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

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

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

ps 또 다른 치료법

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

— 책장
소스

11

또한 공백을 시도하십시오. 당신이 당신의 텍스트를 포장하려는 경우.

— Jazzy

6

훌륭한. 그러나 이것이 작동하기 위해서는 – #restart또한 반드시 있어야 한다는 점에 주목 해야합니다.display: inline;

— Troy Alford

23

이것은 나를 위해 작동하지 않았다, 나는 :before { content: ' '; display: block; }대신 사용 했다.

— Bogdanio 2016 년

1

어떤 이유로 든 어떤 솔루션도 inline-block요소 와 작동하지 않습니다 . 그들은 단순히 다음 줄로 가지 않을 것입니다. 해결책은 실제로 <div></div>HTML에 공백 을 추가하는 것이 었습니다 .

— Adam Reis

2

줄이 끊어지지 않으면 'white-space'속성을 사용할 수 있습니다. {before {content : '\ A'; 공백 : 사전; }

— Amr

35

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

#restart { display: block; }

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

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

— 보 빈스
소스

1

표시 할 수 없습니다 : 블록-요소의 배경을 페이지 전체에서 계속 실행하지 못하게하려면 너비를 표시해야합니다. 요소의 너비를 자동으로 설정할 수 있어야합니다.

— mheavers

3

float: left그들이에 맞는 수축과 새 줄을에 시작하면 요소는 일부 사용 될 수 있습니다. 그렇지 않으면 원하는 것이 불가능할 수 있습니다.

— bobince

downvoted 원인 때때로 개발자는 제어 할 수 없거나 다른 솔루션을 적용 할 결정을 내릴 수없는 큰 프로젝트에서 작업합니다.

— eyurdakul

19

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

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

— 황토
소스

어떤 이유로 새 줄에 대한 다양한 유니 코드 문자가 작동하지 않았습니다 ..? 이 솔루션은 트릭을 수행했습니다-감사합니다!

— Gene Bo

1

예, 그러나 내용 안에 텍스트를 넣어야 할 경우 어떻게됩니까? 답변

— Sándor Zuboly 2016 년

12

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

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

— 제시 킨스 만
소스

11

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

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

— 롤 룩스
소스

평범한 CSS로 훌륭한 아이디어

— NaveenDA

나를위한 매력으로 일했다. content: 'bar: \a' attr(data-description);

— Jimmy Adaro

정답 👍

— cronoklee

10

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

생성 된 컨텐츠는 컨텐츠를 승인하고 마크 업하지 않습니다. 마크 업은 평가되지 않고 표시 만됩니다.
:before및 :after생성 콘텐츠는 너무도 공백이나 편지를 추가하고로 정의하는 요소 내에 추가 block작동하지 않습니다.

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

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

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

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

— 제이슨 겐 나로
소스

"CSS 사용". Jesse Kinsman의 작업과 비슷한 답변을 찾았습니다.

— RonnyKnoxville

4

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

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/

— 망치
소스

창의성을 위해 +1. 외부 소스를 포함하여 실제 HTML을 변경할 수없는 것을 가지고 있습니다 ... 이것은 잘 작동하는 것 같습니다 :) 감사합니다!

— counterbeing

3

다음을 시도하십시오 :

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

— 사용자
소스

팁 : 최소한 한 줄짜리 주석을 추가하면 기본적으로 게시물이 VLQQ에 포함되지 않습니다.

— 중복 제거기

1

줄 높이를 20px로 가정한다고 가정합니다.

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— 카림
소스

1

나는 : before로 나누기를 삽입하는 것에 전혀 운이 없었습니다. 내 해결책은 클래스가있는 범위를 추가하고 범위 안에 휴식을 취하는 것입니다. 그런 다음 표시 할 클래스를 변경하십시오. none; 또는 표시 : 필요에 따라 차단하십시오.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

도움이 되었기를 바랍니다.

— 알았다
소스

1

문서를 <br>태그로 채우고 다른 태그와 마찬가지로 CSS 로 태그를 켜거나 끌 수 있습니다.

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— 잭 해머
소스

0


콘텐츠 의 줄 바꿈 에 미리 인코딩 된 HTML 엔터티를 사용할 수도 있으며 동일한 효과를 갖습니다.

— 헨리 깁슨
소스

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 Content Proerty, "newlines"... p는 부모 블록 내부의 p 끝에 마진이나 패딩을 추가하지 않습니다 (예 : body›section› 피). "\ A"줄 바꿈은 줄 간격을 줄이며 그와 동등한 스타일의 줄 높이입니다.

— 마크 스튜어트
소스

-1

a를 margin-top:20px;에 #restart. 또는 당신이 느끼는 크기 차이가 적절합니다. 인라인 요소 인 경우 추가해야 display:block하거나 이전 버전의 IE에서는 작동 display:inline-block하지 않는다고 생각 inline-block합니다.

— 펑크
소스

문제는 요소의 표시 유형이 인라인 블록이므로 요소 앞에 중단이 필요하다는 것입니다.

— mheavers

디스플레이 유형은 이미 인라인 블록입니다. content 속성을 사용하여 위에서 요청한 것을하려고합니다.

— mheavers

content 속성을 사용하여 html 요소를 추가 할 수 없습니다. 불가능합니다.

— punkrockbuddyholly

당신의 대답은 그의 문제를 해결하지 못했을 것입니다. html 요소를 허용하지 않는 content 속성을 사용하여 줄 바꿈을 제공하는 방법을 자세히 설명하는 당첨 답변을보십시오. 아마도 그것은 원래의 질문에 대한 오해 일 것입니다.

— pdwalker

-1

어떻게 든 수동으로 줄 바꿈을 추가하는 대신 border-bottom: 1px solid #ff0000요소의 테두리를 가져 와서 border-<side>지정한면 만 렌더링하는 구현 을 수행 할 수 있습니다 .

— andy4thehuynh
소스

2

OP는 <br>아닌 등가물을 요구했다 <hr>.

— Beni Cherniavsky-Paskin