この2つの単語を2行で分割する方法

Question

このボックスは角のある素材でデザインしました。私はこれらの2つの言葉を2つの行（上下）で壊すことはできません.iはイメージを含んでいます。ここでは、私は1349と2つの新しいフィードバックをしたい。私は新しい角度の材料です。おかげ

<style> 
    .box-item { 
     background-color: cornflowerblue; 
     width: 100px; 
     height: 120px; 
    } 
    .box-text { 
     color:white; 
    } 
</style> 

    <div layout="row" style="padding: 32px;" ng-cloak> 

<md-whiteframe class="md-whiteframe-2dp box-item" md-colors="[enter image description here][1]background:'blue-400'}" 
       flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout 
       layout-align="end center" layout-margin> 
    <span class="md-display-1 box-text">1349</span> 
    <span class="box-text">New Feedbacks</span> 
</md-whiteframe> 
</div> 

Answer 1

CSS質問です。

2つのインライン要素（スパン）を2行に並べ替える必要があります。 ブロック要素またはとしてそれらの1つをスタイルして、brタグをその間に追加するようにしてください。

<style> 
    .box-item { 
     display: inline-block; 
     background-color: cornflowerblue; 
     height: 120px; 
    } 
    .box-text { 
     color:white; 
     display: block; 
    } 
</style> 

<span>タグは、デフォルトではinline要素があるとだけ、必要に応じて同じくらいの幅を占めているためだ例Here

Answer 2

。

スパンを使用してアイテムを別々のラインに配置する必要がある場合は、blockに表示プロパティを変更して、エレメントの動作をCSSに変更します。 <br>タグを使用するか、<div>タグなどのブロックレベル要素を使用します。

ジョブに適切な要素を使用することをおすすめします。したがって、<div>タグのようなブロックレベルのタグが理想的です。これにより、両方の要素が利用可能な全幅を占めるようになり、CSSの余分な行を必要とせずに別々の行に表示されます（さらに、HTML内の要素ごとの1バイトのスペースを節約します）。

Heres 。それはCSSで

<br>タグが付けられた相続人は

.box-text { 
    color:white; 
    display: block; 
} 

：

<span class="md-display-1 box-text">1349</span> 
<br> 
<span class="box-text">New Feedbacks</span> 

そして3の最も簡単で最もセマンティック、divタグ付き：

<div class="md-display-1 box-text">1349</div> 
<div class="box-text">New Feedbacks</div>