Prevent line break between two elements in CSS
For some basic layout work I'm doing, I'd like links that immediately follow a price to always be shown on the same line as the price. The price text is wrapped in a <span class="price">
tag while the link uses the buy-link class as in <a href="/buy" cla开发者_StackOverflow中文版ss="buy-link">Buy Now</a>
.
I'm looking for CSS that will automatically prevent line breaking between the span
and a
tag but I'm either missing something or it can't be done. I can easily prevent line breaks within the two tags - but not between them.
I want to avoid wrapping both tags in a span
with a white-space: nowrap
manually and use pure CSS if possible.
Update: The HTML looks something like the following. It's not the real code but very similar.
<style>
.price{ font-weight: bold; }
.buy-link{ color: green; }
</style>
<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>
If the link happens to be near the page edge - or block edge in a <div>
or <table>
browsers will wrap the Buy Now link to the next line. Separating the two elements.
Can't you nest the anchor inside the span, like
<span class="price"><a href="/buy" class="buy-link">Buy Now</a> Only $19.95!</span>
then set the span to white-space: nowrap?
<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>
Solution using css method white-space:nowrap
<style>
div{width:10px;white-space:nowrap;}
.price{ font-weight: bold; }
.buy-link{ color: green; }
</style>
<div>
<span class="price">$50</span>
<a href="/buy" class="buy-link">Buy Now</a>
</div>
Solution using HTML method (In case you're not in the mood to use white-space:nowrap;)
<style>
.price{ font-weight: bold; }
.buy-link{ color: green; }
</style>
<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>
<!--Just removing the breaking whitespace between "Buy" and "Now"-->
*Just removed the breaking space between "Buy" and "Now" and inserted a nbsp (non-breaking space) so that the break/wrap doesn't occur *
See this fiddle with the wrapping effect: http://jsfiddle.net/8SP2C/2/
See this fiddle with css white-space:nowrap
: http://jsfiddle.net/8SP2C/1/
See this fiddle with html method : http://jsfiddle.net/8SP2C/3/
I have just tested this in all five browsers and it works fine. You don't need a parent class. To bold something without creating a line break, just do this:
First put this in the head portion of your html:
<style type="text/css">
.makeBold /* to only be used with SPAN: (i.e.) <span class="makeBold"></span> */
{
font-weight:bold;
width:122px; /* This should be the width length of the thing you are bolding */
white-space:nowrap;
}
</style>
Later in the Body of your HTML you should just use span.
<span class="makeBold">BOLD THIS TEXT</span>
You can use span inside a Div and stay HTML5 compliant.
Enjoy
As <span>
element is meant for inline grouping by default, the price and link should be on same line.
I guess some CSS is over-riding it.
精彩评论