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 €

问题是：我只能在此代码周围添加一个附加标签，但不能更改代码本身（因为它是由3rd-party-tool生成的）。好的，有可能以某种方式替换输出，但是实际代码比此示例复杂。

那么有可能仅通过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>

CSS：防止跨距换行

2 个答案: