使用Javascript或CSS在跨距内打断一行

我很清楚span是一个内联元素，通过创建一个单独的span并简单地在其上使用

display:block

，在大多数其他情况下都是解决方案。我的代码有点复杂，因为我的代码被Javascript和半PHP代码纠缠在一起。这就是我面临的问题：

这部分代码用于模板文件（.tpl）：

这项工作非常完美，目前的情况如下：

（注意：

元素具有固定的宽度和高度）

问题是，我希望在“保存”部分后有一个换行符，并且能够用更大的字体显示金额。演示：

正如我上面提到的，这可以通过用另外两个跨距将两个跨距分开，并根据我想要的外观对它们进行样式化来实现。然而，由于我对Javascript的了解非常有限，我不知道插入跨度的正确方法。我尝试了几种方法，例如在

formatCurrency

之前添加

html+=''

，在parandise之后添加一个结束标记，但由于某种原因，这会把设计中的一切都搞砸。我也尝试了不使用

html+=

，直接使用引号，同样的事情也发生了。有什么解决办法？它不一定是Javascript代码。它也可以是CSS或HTML解决方案

编辑：

---

不幸的是，使用

是不合理的，因为我无法对单独显示的金额进行样式化。此外，使用该标记会造成巨大的缺口，使金额超出（溢出）

元素。
您可以将美元值包装在jQuery使用创建的元素中，并使用给定的类对其进行相应的样式设置


var金额=$（'reduction\u amount\u display'）；
amount.html（'SAVE'）；
追加金额（“$10”）
.style金额{
字体大小：32px；
}


您能否在“保存”之后添加
？然后，一个$10然后使用css将您的新样式应用到类foo？@user3739842，因为那样我就无法单独对金额进行样式化。也有点搞砸了。数量和“保存”之间的差距太大了（它们不会粘住）。您可以在css中更改
的高度also@user3739842但是，无法对金额进行样式化的问题仍然存在。请参见我在原始注释中的编辑，您可以附加一个类，然后在CSS中以该类为目标。我是否应该将代码放在if语句之后？这也是正确的：
amount.append（“+formatCurrency（贴现值、货币格式、货币符号、货币空白）”）因为10美元不是固定金额，它根据后台的设置而变化。您的问题都可以用
是
回答。由于我们没有提供
formatCurrency（）
函数，因此固定数字仅用于演示目的。if语句将控制所提供的jQuery代码，就像它当前为您提供的一样。
<p id="reduction_amount" {if !$product->specificPrice || $product->specificPrice.reduction_type != 'amount' || $product->specificPrice.reduction|floatval ==0} style="display:none"{/if}>
   {strip}
    <span id="reduction_amount_display">
     {if $product->specificPrice && $product->specificPrice.reduction_type == 'amount' && $product->specificPrice.reduction|floatval !=0}
     SAVE {convertPrice price=$productPriceWithoutReduction|floatval-$productPrice|floatval}
     {/if}
    </span>
   {/strip}
</p>

if (combination.specific_price.reduction_type == 'amount') {
  $('#reduction_amount_display').html('SAVE ' + formatCurrency(discountValue, currencyFormat, currencySign, currencyBlank));
  $('#reduction_amount').show();
}