当没有更多的空间时重新格式化文本

我有这个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 / –

当没有更多的空间时重新格式化文本

回答

相关问题