<br />를 사용하지 않고 CSS에서 줄 바꿈하는 방법은 무엇입니까? <br> How are you </p> 없이 동일한

산출:

여보세요
어떻게 지내

암호:

<p>hello <br> How are you </p>

없이 동일한 출력을 얻는 방법 <br>?

답변

같은 HTML 구조 불가능, 당신은 구별 할 뭔가가 있어야합니다 Hello및 How are you.

내가 사용하는 것이 좋습니다 span당신이 다음 (단지처럼 블록으로 표시됩니다 것을들 <div>실제로).

p span {
  display: block;
}
<p><span>hello</span><span>How are you</span></p>
스 니펫 확장

답변

개행을 유지하는 white-space: pre;요소를처럼 작동하게하는 데 사용할 수 있습니다 <pre>. 예:

p {
  white-space: pre;
}
<p>hello
How are you</p>
스 니펫 확장

IE의 경우 IE8 이상에서만 작동합니다.

답변

<br/>정상적으로 사용 하되 display: none원하지 않을 때는 숨 깁니다 .

이 질문을 찾는 대부분의 사람들은 CSS / 반응 형 디자인을 사용하여 특정 장소에 줄 바꿈이 나타날지 여부를 결정하기를 기대합니다. (그리고 개인에 대한 것이 없습니다 <br/>)

즉시 명확하지는 않지만 실제로 태그에 적용 display:none하여 <br/>태그를 숨길 수 있으므로 시맨틱 BR 태그와 함께 미디어 쿼리를 사용할 수 있습니다.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em)
 {
    br
    {
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

이 기능은 텍스트를 정확히 두 줄로 나눠야하는 반응 형 디자인에 유용합니다.

http://jsfiddle.net/nNbD3/1/

답변

공백 및 줄 바꿈 처리를 정의하기위한 몇 가지 옵션이 있습니다. 예를 들어 <p>태그에 내용을 넣을 수 있다면 원하는 것을 쉽게 얻을 수 있습니다.

들어 줄 바꿈이 아닌 공백의 보존 사용 pre-line(하지 pre의 등) :

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

다른 동작이 필요한 경우 다음 중 하나를 선택하십시오 (WS = WhiteSpace, LB = LineBreak).

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

출처 : W3 Schools

답변

CSS 의 “\ a” 명령은 캐리지 리턴을 생성합니다. 이것은 HTML이 아닌 CSS이므로 추가 마크 업없이 원하는 것에 더 가깝습니다 .

인용 부호에서, 아래 예는 제목과 소스 링크를 모두 표시하고 둘을 캐리지 리턴 ( "\a")으로 구분합니다 .

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}

답변

CSS에서 코드를 사용하십시오.

p {
    white-space: pre-line;
}

이 코드를 사용하면 P 태그 안에 들어가는 모든 CSS가 HTML에서 줄 바꿈이됩니다.

답변

이전에 말한 것을 바탕으로 이것은 순수한 CSS 솔루션입니다.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>