산출:

여보세요
어떻게 지내

암호:

<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>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

또는

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

출처 : https://stackoverflow.com/a/36191199/2377343

요소에 줄 바꿈이 생기도록하려면 다음을 지정하십시오.

display:block;

블록 레벨 요소 다음에 부동되지 않은 요소가 다음 줄에 나타납니다. <p> 및 <div>와 같은 많은 요소는 이미 블록 레벨 요소이므로 사용할 수 있습니다.

그러나 이것이 알면 좋지만 실제로는 콘텐츠의 맥락에 더 의존합니다. 예를 들어, CSS를 사용하여 줄 바꿈을 강요하지 않을 것입니다. 의미 적으로 p 태그가 표시하는 텍스트에 가장 적합하기 때문에 <br />가 적합합니다. CSS를 중단하기 위해 더 많은 마크 업이 필요하지 않습니다. 기술적 그렇지 않아 정확히 그래서 당신은 무엇을 사용, 단락,하지만 <인사> 태그가 없습니다. HTMl을 사용하여 콘텐츠를 잘 설명하는 것이 훨씬 중요합니다. 그 후 콘텐츠를 예쁘게 만드는 방법을 알아보십시오.

다음은 나쁜 질문에 대한 나쁜 해결책이지만 문자 그대로 요약을 충족시키는 것입니다.

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

링크 목록

다른 답변은 상황에 따라 줄 바꿈을 추가하는 좋은 방법을 제공합니다. 그러나 :after선택기는 링크 목록에 대한 CSS 제어 를 위해 이것을 수행하는 더 좋은 방법 중 하나입니다. 아래에 언급 된 이유로 (및 유사한 것)에 .

다음은 목차를 가정 한 예입니다.

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

그리고 여기 간단하고 호환되는 Simon_Weaver의 기술이 있습니다. 스타일과 내용을 많이 분리하지 않고 더 많은 코드가 필요하며 사실 이후에 나누기를 추가하려는 경우가 있습니다. 그래도 여전히 오래된 IE의 경우 훌륭한 솔루션입니다.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

위 솔루션의 장점에 유의하십시오.

• HTML의 공백에 관계없이 출력은 동일합니다 (vs. pre )
• 요소에 추가 패딩이 추가되지 않습니다 (NickG 참조). display:block 의견 )
• 스타일 변경을 위해 모든 HTML 파일로 이동하지 않고도 일부 공유 CSS를 사용하여 가로 및 세로 링크 목록을 쉽게 전환 할 수 있습니다.
• 아니요 float또는clear 주위의 내용에 영향을주는 스타일
• 스타일은 내용과 별개입니다 (vs. <br/>또는pre 하드 코딩 된 나누기)
• 이것은 다음을 사용하여 느슨한 링크에도 사용할 수 있습니다. a.toc:after and를<a class="toc">
• 여러 나누기를 추가하고 접두사 / 접미사 텍스트를 추가 할 수 있습니다

어쩌면 누군가 나와 같은 문제가있을 수 있습니다.

나는 요소에 display: flex있었으므로 사용해야했습니다 flex-direction: column.

br태그를로 설정display: none 도움이되지만 WordsRunTogether로 끝날 수 있습니다. 대신 공백 문자로 바꾸는 것이 더 유용하다는 것을 알았습니다.

HTML :

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS :

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

방법에 대한 <pre>태그?

출처 : http://www.w3schools.com/tags/tag_pre.asp

예를 들어 많은 패딩을 추가하고 텍스트를 새 줄로 나눌 수 있습니다.

p{
    padding-right: 50%;
}

반응 형 디자인의 상황에서 특정 너비 범위 내에서만 텍스트를 분할 해야하는 상황에서 잘 작동했습니다.

나는 매우 간단한 해결책을 좋아합니다. 여기에 하나 더 있습니다.

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

그리고 CSS

p {
 display: flex;
 flex-direction: column;
}

오버 플로우 랩 사용 : break-word; 처럼 :

.yourelement{
overflow-wrap: break-word;
}

당신은 내용을 선언해야합니다 <span class="class_name"></span> . 그런 다음 줄이 끊어집니다.

\A 줄 바꿈 문자를 의미합니다.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Vincent Robert와 Joey Adams의 답변이 모두 유효합니다. 그러나 마크 업을 변경하지 않으려면<br /> Javascript를 사용하여 됩니다.

마크 업을 변경하지 않고 CSS에서이를 수행 할 방법이 없습니다.

제 경우에는 줄 바꿈을하기 위해 입력 버튼이 필요했습니다.
버튼에 다음 스타일을 적용하고 작동했습니다.

clear:both;

누군가에게 도움이되는 경우 ...

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

<p>This is an <a class="on-new-line">inline link</a>?</p>

이 CSS로 :

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

 공백 대신 사용 하면 중단이 방지됩니다.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

이것은 Chrome에서 작동합니다.

p::after {
    content: "-";
    color: transparent;
    display: block;
}

항상 줄을 끊을 것이기 때문에 중단 점을 사용하고 싶지 않은 것 같습니다. 그 맞습니까? 그렇다면 <br />텍스트에 중단 점 을 추가하는 방법에 대해서는 다음과 같이 클래스를 제공하십시오 <br class="hidebreak"/>.<br /> 있으므로 특정 너비에서 끊어 지지만 해당 너비 이상으로 인라인으로 유지됩니다.

HTML :

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS :

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

코드는

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS는

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

하지마 줄 바꿈을 원하면 하나를 사용하십시오.