CSS를 사용하여 요소 앞에 줄 바꿈을 삽입하는 방법
CSS 콘텐츠 속성을 사용하여 요소 앞에 줄 바꿈 태그를 삽입하는 방법을 본 것 같습니다.분명히 이것은 작동하지 않습니다.
#restart:before { content: '<br/>'; }
하지만 어떻게 하는 거지?
사용할 수 있습니다.\A psuedo가 생성한 콘텐츠의 이스케이프 시퀀스입니다.CSS2 사양에 대해 자세히 알아보십시오.
#restart:before { content: '\A'; }
추가해야 할 수도 있습니다.white-space:pre;로.#restart.
참고:\A줄의 끝을 나타냅니다.
p.s. 또 다른 치료법은
:before { content: ' '; display: block; }
한다면#restart는 인라인 요소입니다(예:<span>,<em>그런 다음 다음 다음을 사용하여 블록 요소로 변환할 수 있습니다.
#restart { display: block; }
이렇게 하면 요소 전후에 모두 줄 바꿈이 보장됩니다.
CSS가 요소 앞에만 줄 바꿈과 같은 역할을 하는 것을 삽입하도록 하는 방법은 없습니다.예를 들어, 다른 변경사항의 부작용으로 이전에 줄 바꿈을 발생시킬 수 있습니다.float: left또는clear: left떠다니는 요소, 또는 심지어 미친 것과 같은 것 뒤에.#restart:before { content: 'a load of non-breaking spaces'; }일반적인 경우에는 좋은 생각이 아닐 겁니다
이것은 나에게 도움이 됩니다.
#restart:before {
content: ' ';
clear: right;
display: block;
}
다음 CSS가 저에게 효과가 있었습니다.
/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
원하는 방식으로 CSS를 통해 생성된 콘텐츠를 추가할 수 없는 이유는 두 가지입니다.
생성된 콘텐츠는 콘텐츠를 허용하고 마크업은 허용하지 않습니다.마크업은 평가되지 않고 표시됩니다.
:before그리고.:after생성된 내용이 요소 내에 추가되므로 공백이나 문자를 추가하고 정의하는 것조차block작동하지 않습니다.
이 있습니다.::outside당신이 원하는 것을 할 수 있는 유사 요소.그러나 브라우저를 지원하지 않는 것 같습니다. (자세한 내용은 여기에서 확인하십시오. http://www.w3.org/TR/css3-content/ #http)
여기서 jQuery를 조금 사용하는 것이 가장 좋습니다.
$('<br />').insertBefore('#restart');
예: http://jsfiddle.net/jasongennaro/sJGH9/1/
앞의 유사 요소에 유니코드 줄바꿈 문자를 넣기만 하면 됩니다.
#restart::before { content: '\00000A'; }<p>
The quick brown fox
<span id="restart">jumps over the lazy dog</span>
</p>네, 완전히 할 수 있지만 확실히 완전한 해킹입니다. (사람들은 그런 코드를 쓰는 것에 대해 당신에게 더러운 인상을 줄 수 있습니다.)
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/
다음을 시도합니다.
#restart::before {
content: '';
display: block;
}
문서를 다음 항목으로 채울 수 있습니다.<br>다른 것과 마찬가지로 CSS를 사용하여 태그를 지정하고 설정을 해제합니다.
<style>
.hideBreaks {
display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
라인 높이를 20px로 가정합니다.
.restart:before {
content: 'First Line';
padding-bottom:20px;
}
.restart:after {
content: 'Second-line';
position:absolute;
top:40px;
}
저는 전에 :와 단절을 삽입하는 행운이 전혀 없었습니다.나의 해결책은 수업이 있는 스판을 추가하고 그 안에 브레이크를 넣는 것이었습니다.그런 다음 클래스를 필요에 따라 없음 표시 또는 차단 표시로 변경합니다.
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;
}
}
이게 도움이 되길 바랍니다.
바꿈에 . 당신의 컨텐츠에 그리고 그것은 같은 효과를 가져올 것입니다.
body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }
https://www.w3.org/TR/CSS2/generate.html#x18 컨텐츠 속성, "새 줄"... p는 상위 블록 내부의 p 끝에 여백이나 패딩을 추가하지 않습니다(예: 본문 › 섹션 › p)."\A" 줄 바꿈은 줄 간격, 즉 동일한 스타일의 줄 높이를 강제합니다.
CSS를 사용하여 텍스트 앞에 새 줄을 추가하려면 컨텐츠 속성과 함께 ::bore pseudo-element를 사용하고 줄 바꿈을 나타내는 "\A"로 설정합니다.다음은 예입니다.
.myElement::before {
content: "\A";
white-space: pre;
}
위 코드에서 .myElement는 텍스트 앞에 새 줄을 추가할 요소의 선택기를 나타냅니다.:: before 유사 요소는 요소의 내용 앞에 내용을 삽입합니다.내용 속성은 줄 바꿈을 나타내는 "\A"로 설정됩니다.공백: pre; 속성은 줄 바꿈을 포함하여 공백을 보존하는 데 사용됩니다.
특정 요소의 클래스 또는 ID에 따라 선택기(.myElement)를 조정할 수 있으며 텍스트 앞에 새 줄을 추가할 요소에 이 CSS를 적용할 수 있습니다.
줄 바꿈을 하는 대신에, 은 어게든수줄로추, 대신수있다를 구현할 수 있습니다.border-bottom: 1px solid #ff0000요소의 경계를 취하고 렌더링만 할 것입니다.border-<side>어느 쪽이든 선택할 수 있습니다.
추가margin-top:20px;#restart또는 당신이 느끼는 어떤 크기의 차이도 적절합니다.인인요경추가합야니다해우를 .display:block또는display:inline-block가 생각하기엔 ㅠㅠㅠㅠinline-block이전 버전의 IE에서 작동합니다.
언급URL : https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css
'programing' 카테고리의 다른 글
| res.sendFile 절대 경로 (0) | 2023.08.29 |
|---|---|
| node.js, 오류: 'express' 모듈을 찾을 수 없습니다. (0) | 2023.08.29 |
| Swift: UICollection을 새로 고치는 방법장치 회전 후 레이아웃 보기 (0) | 2023.08.29 |
| PHP 및 InnoDB 엔진을 사용하는 mysqli_rollback()의 문제 (0) | 2023.08.29 |
| ADB 설치가 실패하고 INSTALL_FAILED_가 발생함테스트_전용 (0) | 2023.08.29 |