使用Javascript或CSS在跨度內換行

Question

我很清楚span是一個內聯元素，通過創建一個單獨的span並在其上簡單地使用display:block ，將是大多數其他情況下的解決方案。 由於我的代碼在Javascript和半PHP代碼中糾結在一起，因此我的情況有點復雜。 所以這就是我要面對的：

這部分代碼在模板文件（.tpl）中使用：

<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>

..這部分位於.js文件中：

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

完美運行，這是當前的樣子：

（注意： <p>元素具有固定的寬度和高度）

問題是，我想在“ SAVE”部分后加一個換行符，並能夠用較大的字體設置顯示的樣式。 示范：

正如我上面提到的，這可以通過將兩者與另外兩個跨度分開並將其樣式化為我想要的外觀來實現。 但是，由於我對Javascript的了解非常有限，因此我不知道插入范圍的正確方法。 我嘗試了幾種方法，例如，在formatCurrency之前添加html += '<span class="blabla">' ，而在括號之后添加結束標記，但是由於某種原因，這有點弄亂了設計中的所有內容。 我也嘗試了不使用html +=並用引號簡單地進行了同樣的事情。 有什么解決方案？ 它不一定必須是Javascript代碼。 也可以是CSS或HTML解決方案。

編輯：

不幸的是，使用<br>是不合理的，因為我無法分別顯示所示的樣式。 同樣，使用該標簽會產生巨大的差距，導致金額超出（溢出） <p>元素。

Answer 1

您可以將美元值包裝在jQuery使用append()創建的元素中，並使用給定的類相應地設置其樣式。

 var amount = $('#reduction_amount_display'); amount.html('SAVE '); amount.append('<div class="style-amount">$10</div>'); 

 .style-amount { font-size:32px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="reduction_amount_display"> </p>