Question

我有这个html，其中有主要短语和一个副词，它们都被br分隔。但是当屏幕较小时，主要短语将会中断，并将该子词段推出div。

我已经尝试过不让这句话破解，但这会让她不完全可见，这是我不能做的事情。

我想知道当主要短语没有更多空间（这是在较小的屏幕中）时它是否可能使她的字体缩小以使其完全可见，这意味着她将使用更小的字体将使得然后是副词或删除br，主要短语将会制动，然后是没有br的副词（在同一行中）（我使用framework7）

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

我不想使用jquery.Thanks提前

Answer 1

这可以完全用CSS处理。

要在小屏幕上缩小文字，请使用@media query调整字体大小，如下所示：

HTML：

mysql_

CSS：

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

@media screen and (max-width: 320px) { .text { font-size: 12px; } }适用于iPhone尺寸的屏幕。 Android在max-width: 320px或360px处有点大。

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

1 个答案: