높이를 변경하는 방법은
무엇입니까?
나는 큰 단락의 텍스트를 하위 단락으로 나누고 있습니다 <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></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;
}
br {
content: "";
margin: 2em;
display: block;
margin-bottom: -20px;
}
Firefox, Chrome 및 Safari에서 작동합니다. 탐색기에서 테스트하지 않았습니다. (Windows 태블릿의 전원이 부족합니다.)
줄 바꿈, 글꼴 크기는 Firefox 및 Safari에서 다르게 작동합니다.
마이클과 요다는 옳습니다. 당신이 할 수있는 것은 <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>
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
<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
bla la la bla bla abla la la bla bla abla la la bla bla a bla la la bla bla abla la la bla bla abla la la bla bla a그런 다음 선 높이 또는 패딩 또는 그 p에 대한 것을 지정할 수 있습니다
참고 URL : https://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br
'Programing' 카테고리의 다른 글
| 특정 사용자의 그룹을 찾는 방법은 무엇입니까? (0) | 2020.04.08 |
|---|---|
| 목록에서 요소를 제거하려면 어떻게해야합니까? (0) | 2020.04.08 |
| INI 파일 읽기 / 쓰기 (0) | 2020.04.08 |
| 코드 적용 범위 란 무엇이며 어떻게 측정합니까? (0) | 2020.04.08 |
| Django 쿼리를 값 목록으로 필터링하려면 어떻게해야합니까? (0) | 2020.04.08 |