How to insert a line break before an element using CSS
I feel like I saw a way, using the CSS content property, to insert a line break tag before an element. Obviously this doesn't work:
#res开发者_开发技巧tart:before { content: '<br/>'; }
But how do you do this?
It's possible using the \A escape sequence in the psuedo-element generated content. Read more in the CSS2 spec.
#restart:before { content: '\A'; }
You may also need to add white-space:pre; to #restart.
note: \A denotes the end of a line.
p.s. Another treatment to be
:before { content: ' '; display: block; }
If #restart is an inline element (eg <span>, <em> etc) then you can turn it into a block element using:
#restart { display: block; }
This will have the effect of ensuring a line break both before and after the element.
There is not a way to have CSS insert something that acts like a line break only before an element and not after. You could perhaps cause a line-break before as a side-effect of other changes, for example float: left, or clear: left after a floated element, or even something crazy like #restart:before { content: 'a load of non-breaking spaces'; } but this probably isn't a good idea in the general case.
This works for me:
#restart:before {
content: ' ';
clear: right;
display: block;
}
Following CSS worked for me:
/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
There are two reasons why you cannot add generated content via CSS in the way you want:
generated content accepts content and not markup. Markup will not be evaluated but displayed only.
:beforeand:aftergenerated content is added within the element, so even adding a space or letter and defining it asblockwill not work.
There is an ::outside pseudo element that might do what you want. However, there appears to be no browser support. (Read more here: http://www.w3.org/TR/css3-content/#wrapping)
Best bet is use a bit of jQuery here:
$('<br />').insertBefore('#restart');
Example: http://jsfiddle.net/jasongennaro/sJGH9/1/
Just put a unicode newline character within the before pseudo element:
#restart::before { content: '\00000A'; }<p>
The quick brown fox
<span id="restart">jumps over the lazy dog</span>
</p>Yes, totally doable but it is definitely a total hack (people may give you dirty looks for writing such code).
Here is the HTML:
<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>
Here is the CSS:
#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }
Here is the fiddle: http://jsfiddle.net/AprNY/
Try the following:
#restart::before {
content: '';
display: block;
}
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>
assuming you want the line height to be 20 px
.restart:before {
content: 'First Line';
padding-bottom:20px;
}
.restart:after {
content: 'Second-line';
position:absolute;
top:40px;
}
I had no luck at all with inserting a break with :before. My solution was to add a span with a class and put the break inside the span. Then change the class to display: none; or display: block as needed.
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;
}
}
Hope this helps.
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.
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.
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.
加载中,请稍侯......
精彩评论