余分なスペースがないときにテキストを改造する

Question

私は、メインのフレーズがあるところにhtmlがあり、両方がbrで区切られたサブフレーズを持っています。しかし、画面が小さくなるとメインフレーズが壊れ、div 。

私はすでにフレーズを壊さないようにしようとしましたが、それは彼女を完全に見ることができないでしょう、私はできないことです。

メインフレーズにスペースがない場合（これは小さい画面で表示されます）、フォントサイズを小さくしてフォントサイズを小さくするとフォントサイズが小さくなることを意味しますBR副句続くまたはBrを削除し、メインフレーズは、ブレーキと（同じ行の）（イム使用してframework7）BRなし副句が続くだろう

https://jsfiddle.net/ts45r7zn/

HTML：

<div class="grand-parent"> 
<div class="parent"> 
    <div class="child"> 
    <span class="">hello im the main phrase</span> 
    <br> 
    <span class="">i want to igore br or main phrase get smaller</span> 
    </div> 
</div> 
</div> 

CSS：

.grandparent { 
height: 30%; 
width: 100%; 
position: relative; 
overflow: hidden; 
} 

.parent { 
position: absolute; 
bottom: 0; 
height: 55%; 
width: 100%; 
} 

.child{ 
background-color: rgba(132, 29, 62,0.7); 
height: 31%; 
width: 30%; 
padding-left: 5%; 
} 

私は、これはCSSで完全に処理することができ、事前

Answer 1

でjquery.Thanksを使用しないことを好みます。

、小さな画面上でテキストサイズを小さくするフォントサイズを調整するために@media queryを使用して、このようにするには、次の

HTML：

<span class="text">I'm the main phrase</span> 
<br> 
<span class="text">i want to igore br or main phrase get smaller</span> 

CSS：

@media screen and (max-width: 320px) { 
    .text { 
    font-size: 12px; 
    } 
} 

max-width: 320pxうiPhoneサイズの画面用です。 Androidは360pxまたは400pxで少し大きくなっています。