CSS：防止跨度之间的换行

Question

我有以下html代码：

<span class="product">
    My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>

我的问题是，有时文本被包裹在€之前，所以我得到：

My really super product 19,99
€

我会比较喜欢：

My really super product 
19,99 €

问题是：我只能在此代码中添加一个额外的标记，但无法更改代码本身（因为它是由第三方工具生成的）。好吧，有可能以某种方式替换输出，但实际代码比这个例子更复杂。

那么是否可以通过CSS阻止价格和货币之间的包装？

补充：对不起，我忘了提。它应该是可能的

My really super product 19,99 €

如果宽度有足够的空间，也可以在一行中。

Answer 1

也许这样的事情会适合

变式1

.wrapper {
  position: relative;
}

.wrapper .price {
  padding-right: 20px;
}

.wrapper .currency {
  position: absolute;
  margin-left: -15px;
}

<div class="wrapper">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 200px; background-color: yellow;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 155px; background-color: #0f0;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 140px; background-color: #99f;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

这里.wrapper不是真的有必要。在大多数情况下，您可以为.price和.currency添加样式。尝试将解决方案注入您的布局和审查。

变体2

.price {
  padding-right: 1em;
}

.currency {
  margin-left: -1em;
}

<div>
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div style="width: 200px; background-color: yellow;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div style="width: 155px; background-color: #0f0;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 140px; background-color: #99f;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

Answer 2

你必须使用<br/>这可能会帮助你添加这样的数据

<span=class="">
 My really super product</Span><br/>
<spa="">19,99</span><span="">$</span>