當沒有更多的空間時重新格式化文本

我有這個HTML哪裏有主要短語和一個子句，它們都是由br分隔的，但是當屏幕較小時，主要短語將打破並將子句推出div 。當沒有更多的空間時重新格式化文本

我已經試圖不讓短語突破，但這會讓她不完全可見，那是我不能做的事情。

我想知道它的可能性，當主要短語沒有更多的空間（這是在較小的屏幕），使她的字體較小，所以它完全可以viisible，這意味着她將與一個字體大小會使BR接着subphrase或刪除BR和主短語將制動和將由未經BR中的subphrase隨後（在同一行）（IM使用framework7）

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%; 
}

我不想提前

來源

2017-06-13 sergio

請說明您的具體問題或添加更多的細節，以確切地突出你需要什麼。正如目前所寫，很難確切地說出你在問什麼。 –

如果你不想要休息，你不應該把它放進去。我建議你重新考慮HTML。但目前還不清楚這應該如何看待。 –

父母是否必須是特定的身高？父母之上會有什麼東西嗎？ –

這完全可以用CSS來處理使用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。

來源

2017-06-13 22:16:10

有一種方法可以做到這一點，但只有在文本溢出了div？ – sergio

查看[FitText https://github.com/adactio/FitText.js](https://github.com/adactio/FitText.js） –

或Trunk8智能文本截斷：http://jrvis.com/trunk8 / –

當沒有更多的空間時重新格式化文本

回答

相關問題