텍스트가 큰 단락이 있는데,이 단락의 하위 단락으로 나뉩니다 <br>.

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

나는 두 개의 <br>또는 이와 비슷한 것이 있기 때문에 이러한 하위 단락 사이의 간격을 넓히고 싶습니다. 이 작업을 수행하는 올바른 방법은을 사용하는 <p></p>것이지만 지금은이 레이아웃을 변경할 수 없으므로 CSS 전용 솔루션을 찾고 있습니다.

내가 설정을 해봤 <br>의 line-height와 height함께 display: block, 나 또한 잠시 봤 및 스택 오버플로 에드, 그러나 어떤 해결책을 찾지 못했습니다. 레이아웃을 변경하지 않고도 가능합니까?

CSS :

br {
   display: block;
   margin: 10px 0;
}

이 솔루션은 크로스 브라우저와 호환되지 않지만 적어도 뭔가입니다. 또한 설정을 고려하십시오 line-height.

line-height:22px;

Chrome의 경우 설정을 고려하십시오content .

content: " ";

그 외에는 JavaScript 솔루션에 갇혀 있다고 생각합니다.

실제로 크로스 브라우저를 지원 하는 올바른 솔루션은 다음과 같습니다 .

  br {
        line-height: 150%;
     }

따라서 위의 친구들은 기본적으로 비슷한 대답을 얻었지만 여기에는 간결하게 있습니다. Opera, Chrome, Safari 및 Firefox, IE에서도 작동합니까?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

다른 방법은 HR 을 사용하는 것 입니다. 그러나 교활한 부분은 보이지 않습니다.

그러므로:

<hr style="height:30pt; visibility:hidden;" />

HR을 사용하여보다 깨끗한 BR 브레이크를 시뮬레이션하려면 : Btw는 모든 브라우저에서 작동합니다 !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

내가 아는 한 <br> 하지 않는 이 높이, 그것은 단지 줄 바꿈을 강제로. 당신이 가진 것은 자동 줄 바꿈뿐만 아니라 하위 단락이 아닌 줄 바꿈이있는 텍스트입니다 . 줄 간격을 변경할 수 있지만 모든 줄에 영향을 미칩니다.

방금이 문제가 있었고 사용하여 문제를 해결했습니다.

<div style="line-height:150%;">
    <br>
</div>

해당 <p>요소 에 선 높이를 적용 하여 선이 커질 수 있습니다.

나는 이전에 :before/ :afterCSS2 의사 요소를 시도하지 않았습니다 . 주로 IE8에서만 지원되기 때문입니다 (IE 브라우저 관련) . 이것은 유일한 CSS 솔루션 일 수 있습니다.

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

다음은 QuirksMode에 대한 예 입니다 .

나는 당신이 사용할 수 있다고 생각했습니다.

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

그러나 크롬이나 파이어 폭스에서는 작동하지 않았습니다.

다른 사람에게 발생한 경우에 대비하여 문제를 해결하겠다고 언급했습니다.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Firefox, Chrome 및 Safari에서 작동합니다. 탐색기에서 테스트하지 않았습니다. (Windows 태블릿의 전원이 부족합니다.)

줄 바꿈, 글꼴 크기는 Firefox 및 Safari에서 다르게 작동합니다.

흥미롭게도 중단 태그가 다음과 같이 전체 형식으로 작성된 경우 :

<br></br>

그런 다음 CSS 행 높이 : 145 %가 작동합니다. 중단 태그가 다음과 같이 작성된 경우 :

<br> or 
<br/> 

적어도 Chrome, IE 및 firefox에서는 작동하지 않습니다. 기묘한!

나를 위해 작동하는 것은 단락 태그 사이 에이 인라인을 추가하는 것입니다 ...하지만 최상의 솔루션은 아닙니다.

<br style="line-height:32px">

-------- 편집하다 ---------

나는 이것으로 PC / Mac에 문제가 발생했습니다 ... 텍스트에 새로운 줄 높이를 제공하지만 줄 바꿈은하지 않습니다 ... 직접 테스트를 원할 수도 있습니다. 죄송합니다!

그리고 <hr>어딘가에 제안 된대로 태그를 사용하면 태그가 끝날 <p>것이므로 그 해결책을 잊지 마십시오.
f.ex. 무언가는 주변에 스타일이 지정되어 있으며 <p>, 그 스타일 <hr>은 삽입 후 나머지 내용에 대해 사라 집니다.

다음은 IE, Firefox 및 Chrome에서 작동하는 솔루션입니다. br 요소의 글꼴 크기를 본문 크기에서 14px에서 18px로 늘리고 추가 크기가 텍스트 줄 아래에 있도록 요소를 4px 줄입니다. 결과는 br 아래 4px의 여분의 공백입니다.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

2019 년 9 월 13 일 업데이트 :

<br class=big>필요할 때 큰 줄 바꿈을 만드는 데 사용 합니다. 오늘까지는 다음과 같이 스타일을 지정했습니다.

br.big {line-height:190%;vertical-align:top}

( vertical-align:topIE와 Edge에만 필요했습니다.)

Chrome, Firefox, Opera, Brave, PaleMoon, Edge 및 IE11과 같은 모든 주요 브라우저에서 작동했습니다.

그러나 최근 Chrome 기반 브라우저에서 작동이 중지되었습니다 . "큰"줄 바꿈이 보통 크기의 줄 바꿈으로 바뀌 었습니다.

2019 년 9 월 12 일부로 최신 Chromium Portable 55.0.2883.11에서 작동하지만 Opera 63.0.3368.71 및 Chrome 76.0.3809.132 (Windows 모두)에서 작동하지 않습니다. 안드로이드).)

시행 착오 후에, 나는 다음과 같은 대체물로 끝났습니다. 이는 모든 해당 브라우저의 현재 버전에서 작동합니다.

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

노트:

line-height:190% 최신 버전의 Chrome 기반 브라우저를 제외한 모든 기기에서 작동합니다.

vertical-align:topIE와 Edge에 (와 함께 line-height:190%) 필요한 부분은 앞뒤 부분이 아닌 앞줄 뒤에 오는 여분의 공간을 얻는 데 필요합니다.

display:block;content:"";margin-top:0.5em Chrome, Opera 및 Firefox에서는 작동하지만 Edge & IE에서는 작동하지 않습니다.

<br>HTML 편집에 신경 쓰지 않는다면 태그 뒤에 약간의 수직 공간을 추가하는 대안 (간단한) 방법은 다음과 같습니다. 모든 브라우저에서 잘 작동합니다.

<span style="vertical-align:-37%"> </span><br>

(물론 더 크거나 작은 간격으로 필요에 따라 "-37 %"를 조정할 수 있습니다.) 다음은 테마에 대한 다른 변형을 포함하는 데모 페이지입니다.

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



2020 년 5 월 28 일 :

데모 페이지를 업데이트했습니다. 이제 위의 모든 기술을 보여줍니다.

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

마이클과 요다는 옳습니다. 당신이 할 수있는 것은 <p>태그를 사용하는 것입니다. 블록 태그는 아래쪽 여백을 사용하여 다음 블록을 오프셋하므로 더 큰 간격을 얻기 위해 이와 비슷한 것을 할 수 있습니다.

<p>
    A block of text.
</p>
<p>
    Another block
</p>

또 다른 대안은 <hr>간격의 높이를 명시 적으로 정의 할 수 있는 블록 태그를 사용하는 것입니다.

<br />의 텍스트로 채워진 행만큼 많은 공간을 차지하므로 <p>변경할 수 없습니다. 더 큰 것을 원한다면 단락으로 분리하고 싶다는 의미이므로 other를 추가하십시오 <p>. 당신이 할 수있는 가장 의미론적인 것을 잊지 마십시오;)

CSS에서 "block-quote"속성을 사용할 수도 있습니다. 그러면 개별 행에 영향을 미치지 않지만 단락 또는 "블록 따옴표"사이의 구분선에 대해서만 매개 변수를 설정할 수 있습니다.

업데이트 :
나는 서 있습니다. "blockquote"는 실제로는 html 속성입니다. 작업 주위에서 <p> 및 </ p>처럼 사용하십시오. 그런 다음 CSS에서 블록 따옴표에 대한 매개 변수를 설정할 수 있습니다

blockquote { margin-top: 20px }

도움이 되었기를 바랍니다. br의 매개 변수 설정과 유사하며 브라우저 간 호환 가능하거나 호환되지 않을 수 있습니다.

BR의 높이를 조정할 수는 없지만 display : none을 사용하여 BR을 안정적으로 사라지게 할 수 있습니다.

다음에 대한 솔루션을 검색하는 동안이 페이지를 방문했습니다.

제 3 자 지불 게이트웨이 (Worldpay)를 사용하면 템플릿 본문에 주입되는 10k 최대 CSS 및 HTML (스크립트가 허용되지 않음)을 사용하여 지불 페이지를 사용자 정의 할 수 있으며 몇 가지 BR, FONT 태그 등이있는 경우 IE7 / 8을 Quirks 모드로 설정하는 DTD와 결합하면 브라우저 간 맞춤화가 거의 불가능 해집니다!

BR을 끄면 일이 훨씬 일관되게됩니다 ...

이 방법을 사용하지만 크로스 브라우저인지 모르겠습니다.

================= 방법 1 ==================

br {
    display:none;
}

또는

================= 방법 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

또는

================= 방법 3 ==================

br:after { content: "" }
br { content: "" }

태그가 포함 된 태그 에서 CSS line-height속성을 사용해보십시오 . 격리를 위해 IMO를 사용하는 것이 더 좋지만 태그를 분리하려는 경우 태그 를 사용할 수 있습니다 .pbridpdiv

다른 사람이 이미 이것을 말한 경우 죄송하지만 간단한 해결책은 "라인 높이"를 가지고 놀아 보는 것입니다. 줄 바꿈을 사용할 때 너무 많은 공간을 확보 한 경우 단순히 줄 높이를 너무 높게 설정했기 때문입니다. CSS에서이를 수정하거나 (해당 속성을 사용하는 모든 항목에 영향을 줄 수 있음) CSS를 재정의하기 위해 인라인 스타일을 수행 할 수 있습니다.

HTML을 PDF로 변환하고 텍스트를 표 셀의 세로 중앙에 배치하는 솔루션을 개발해야했지만 일반 입력을 제외하고는 아무것도 작동하지 않았습니다. <br>

따라서 상자 밖에서 생각하면 글꼴 크기 (pt)를 조정하여 세로 크기를 변경했습니다.

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

이 인라인과 각
요소 에서이 작업을 수행해야하지만 원하는 효과를 얻으려면 대부분의 브라우저에서 작동합니다. 각 요소에 대해 인라인으로 만들면 대부분의 브라우저와 전자 메일에서 작동해야합니다 (그러나 여기서 논의하기에는 너무 복잡합니다).

span 태그에서 스타일 간격을 사용할 수 없을 때 트릭을 수행했습니다.

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

사용하다 <div>

<div>Content 1</div>Content 2

이것은 수직 공간이없는 새로운 라인을 허용합니다.

이것은

<div>Content 1</div>Content 2

<br>태그로 인한 간격 문제를 해결하면서 여기에 착륙 한 사람에게보다 일반적인 수준의 답변 . 완벽한 픽셀에 가까워 지려면 많은 재설정을해야합니다.

br {
    content: " ";
    display: block;
}

특정 문제에 대해 줄 사이에 특정 공간이 있어야했습니다. 상단과 하단에 여백을 추가했습니다.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

IE7에서 솔루션의 콤보를 사용하여 작동하도록했지만 Nigel 및 다른 사람들이 제안한 것처럼 Br을 DIV에 래핑했습니다. ID를 추가하고 at = "server"를 실행하여 확인란 행에서 확인란을 제거 할 때 BR을 제거 할 수 있습니다.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

두 개의 br 태그를 사용하는 것이 모든 브라우저에서 작동하는 가장 간단한 솔루션입니다. 그러나 반복적입니다.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

줄 바꿈 대신 단락을 추가하는 것은 어떻습니까?

bla la la bla bla abla la la bla bla abla la la bla bla a

그런 다음 선 높이 또는 패딩 또는 해당 p에 대한 모든 것을 지정할 수 있습니다