CSS를 사용하여 요소 앞에 줄 바꿈을 삽입하는 방법
CSS 내용 속성을 사용하여 요소 앞에 줄 바꿈 태그를 삽입하는 방법을 본 것 같습니다. 분명히 이것은 작동하지 않습니다 :
#restart:before { content: '<br/>'; }
그러나 당신은 이것을 어떻게합니까?
유사 요소 생성 컨텐츠에서 \A 이스케이프 시퀀스 를 사용하는 것이 가능 합니다. CSS2 사양에서 자세히 읽어보십시오 .
#restart:before { content: '\A'; }
또한 추가해야 할 수 있습니다 white-space:pre;로 #restart.
참고 : \A줄의 끝을 나타냅니다.
ps 또 다른 치료법
: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;
}
이전 의사 요소 내에 유니 코드 개행 문자를 넣으십시오.
#restart:before { content: '\00000A'; }
원하는 방식으로 CSS를 통해 생성 된 컨텐츠를 추가 할 수없는 두 가지 이유가 있습니다.
생성 된 컨텐츠는 컨텐츠를 승인하고 마크 업하지 않습니다. 마크 업은 평가되지 않고 표시 만됩니다.
:before및:after생성 콘텐츠는 너무도 공백이나 편지를 추가하고로 정의하는 요소 내에 추가block작동하지 않습니다.
::outside원하는 것을 할 수 있는 의사 요소가 있습니다. 그러나 브라우저를 지원하지 않는 것 같습니다. (여기에서 더 읽으십시오 : http://www.w3.org/TR/css3-content/#wrapping )
가장 좋은 방법은 여기에 약간의 jQuery를 사용하는 것입니다.
$('<br />').insertBefore('#restart');
예 : http://jsfiddle.net/jasongennaro/sJGH9/1/
다음 CSS가 나를 위해 일했습니다.
/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
그렇습니다. 완전히 할 수는 있지만 완전히 해킹입니다 (사람들은 그러한 코드 작성에 대한 더러운 표정을 줄 수 있습니다).
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;
}
줄 높이를 20px로 가정한다고 가정합니다.
.restart:before {
content: 'First Line';
padding-bottom:20px;
}
.restart:after {
content: 'Second-line';
position:absolute;
top:40px;
}
나는 : before로 나누기를 삽입하는 것에 전혀 운이 없었습니다. 내 해결책은 클래스가있는 범위를 추가하고 범위 안에 휴식을 취하는 것입니다. 그런 다음 표시 할 클래스를 변경하십시오. none; 또는 표시 : 필요에 따라 차단하십시오.
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;
}
}
도움이 되었기를 바랍니다.
You can populate your document with <br> tags and turn them on\off with css just like any others:
<style>
.hideBreaks {
display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
You can also use the pre-encoded HTML entity for a line break in your content and it'll have the same effect.
body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }
https://www.w3.org/TR/CSS2/generate.html#x18 The Content Proerty, "newlines"... p will not add margin nor padding at end of p inside parent block (e.g., body › section › p). "\A " line break forces line space, equivalent styled line-height.
Add a margin-top:20px; to #restart. Or whatever size gap you feel is appropriate. If it's an inline-element you'll have to add display:block or display:inline-block although I don't think inline-block works on older versions of IE.
Instead of manually adding a line break somehow, you can do implement border-bottom: 1px solid #ff0000 which will take the element's border and only render border-<side> of whichever side you specify.
참고URL : https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css
'Programming' 카테고리의 다른 글
| CERT / PEM 인증서를 PFX 인증서로 변환 (0) | 2020.06.05 |
|---|---|
| C ++ 코드 / 프로젝트에서 메모리 누수를 찾는 방법은 무엇입니까? (0) | 2020.06.05 |
| 모든 테이블 이름을 나열하는 PostgreSQL 쿼리? (0) | 2020.06.05 |
| virtualenv 폴더 이름을 바꾸지 않고 이름 바꾸기 (0) | 2020.06.05 |
| build.gradle에서 기본적으로 Android Studio는 어떤 제품 맛을 빌드합니까? (0) | 2020.06.05 |