代码之家 › 专栏 › 技术社区 › Paul Alexander

防止css中两个元素之间换行

whitespace css

Paul Alexander · 技术社区 · 15 年前

对于一些我正在做的基本布局工作,我希望链接,立即跟随价格,总是显示在同一行的价格。价格文本用 <span class="price"> 当链接使用buy link类时标记,如 <a href="/buy" class="buy-link">Buy Now</a> .

我要找的css可以自动防止 span 和 a 但我要么是丢了什么,要么就是做不到。我很容易防止断线 在内部 两个标签-但不是在它们之间。

我想避免在 跨度 用一个 white-space: nowrap 如果可能的话,手动使用纯css。

更新: html看起来如下所示。这不是真正的代码,但非常相似。

<style>
    .price{ font-weight: bold; }
    .buy-link{ color: green; }
</style>

<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>

如果链接恰好位于 <div> 或 <table> 浏览器会将“立即购买”链接包装到下一行。分离这两个元素。

5 回复 | 直到 15 年前

Robusto 13 年前

你就不能把锚套在跨度里吗?

<span class="price"><a href="/buy" class="buy-link">Buy Now</a>&nbsp;Only $19.95!</span>

然后将跨度设置为空白:nowrap?

graphicdivine 15 年前

<span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy Now</a>

Donald 11 年前

我刚刚在所有五个浏览器中测试过这个,它工作得很好。你不需要父类。要在不创建换行符的情况下加粗某些内容,请执行以下操作:

首先把这个放在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>

稍后在html正文中,您应该只使用span。

<span class="makeBold">BOLD THIS TEXT</span>

您可以在div中使用SPAN,并保持HTML5兼容。

享受

Appleshell 7 年前

使用css方法的解决方案空白: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>â

使用HTML方法的解决方案(如果您不想使用空格:nowrap;)

    <style>
        .price{ font-weight: bold; }
        .buy-link{ color: green; }
    </style>

    <span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy&nbsp;Now</a>
<!--Just removing the breaking whitespace between "Buy" and "Now"-->

*只需去掉“购买”和“现在”之间的空格,并插入一个nbsp(非空格),这样就不会出现中断/换行*

请看这个带有包装效果的小提琴: http://jsfiddle.net/8SP2C/2/

看看这个css white-space:nowrap : http://jsfiddle.net/8SP2C/1/

请参阅以下HTML方法: http://jsfiddle.net/8SP2C/3/