JavascriptまたはCSSを使用してスパン内の線を分割する

Question

スパンがインライン要素であることをよく知っていて、別のスパンを作成して単にdisplay:blockを使用することでほとんどの場合解決策になります。私のコードはJavascript & semi-PHPコードで絡み合っているので、私のほうがもう少し複雑です。だからここに私が直面してんだよ：

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

..And .jsファイル内のこの部分：

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

コードのこの部分は、テンプレートファイル（の.tpl）に使用されています

これは完璧に動作し、これが現在どのように見えるかです：

（注：<p>要素の幅と高さが固定されています）

"SAVE"部分の後に改行して、より大きなフォントサイズで表示するようにスタイルを変更したいと思います。デモンストレーション：

私は2つの2と他のスパンを分離し、私はそれを見てみたいどのようにそれらをstylizingすることによって達成さ、前述したように、これは、可能性があります。しかし、私のJavascriptに関する知識はかなり限られているので、私はスパンを挿入する正しい方法を知らない。私はいくつかの方法を試しました。たとえば、html += '<span class="blabla">'の直前にformatCurrencyを追加し、閉じたタグをparanthesisの後に追加しましたが、これは何らかの理由でデザインのすべてを台無しにしました。私もhtml +=を使わずに試してみましたが、ひたすら引用符をつけて同じことが起こりました。これにはどんな解決策がありますか？必ずしもJavascriptコードである必要はありません。それは、CSSまたはHTMLソリューションでもあります。

編集：私は別々に示さ金額を型にはめることができないであろうから

<br>を使用したが、残念ながらもっともらしいではありません。また、そのタグを使用すると、その量が<p>要素の外に出る（オーバーフローする）大きな隙間ができます。

Answer 1

append()を使用してjQueryによって作成された要素にドル値をラップし、指定されたクラスに応じてそれをスタイルすることができます。

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>