最小化窗口時文本丟失

文本正在通過窗口的兩側而不是向下包裹。嘗試運行代碼完整窗口，然後調整窗口寬度，並查看我的意思。

我找不到解決方案，請幫忙嗎？

這是它應該是什麼樣子最小

這裏的時候是小提琴鏈接：https://jsfiddle.net/zgLtbvyv/

/*everything is in a column*/ 
 
.mb-flex-column{ 
 
display: flex; 
 
    flex-direction: column;  
 
} 
 
    
 
    
 
/*image and text are in a row*/ 
 
    .mb-flex-row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
     align-content: center; 
 
}  
 
/*Flex to aligne the image and text correctly, and make them stick to the side*/ 
 
.mb-flex-item:nth-child(odd) .mb-flex-row{ 
 
     flex-direction: row-reverse; 
 
    } 
 

 
.mb-content-wrap{ 
 
    display: table; 
 
    overflow: hidden; 
 
} 
 
    
 
.mb-content{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
    } 
 
    
 
h4{ 
 
    text-align: left; 
 
    padding-top: 0; 
 
}

<div id=mb-gara-mobile> 
 
    <div class="mb-flex-column black"> 
 
       <div class="mb-flex-item"> 
 
        <div class="mb-flex-row"> 
 
         <div class="image-wrap"> 
 
          <img src="svg/gara1.svg" alt=""> 
 
         </div> 
 
         <div class="mb-content-wrap"> 
 
          <div class="mb-content"> 
 
           <h4>Fornøydsgaranti</h4> 
 
            De to første øktene er gratis, og du kan kanslerere når du vil. 
 
            Fornøydsgarantien gjelder alle elever. 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="svg/gara2.svg" alt=""> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Karaktergaranti</h4> 
 
         Jeg refunderer 100% av totalbeløpet dersom jeg feiler med å forbedre karakteren til eleven. Gjelder for elever med startkarkater: 2, 3 eller 4. 
 
         Karaktergarantien gjelder kun for elever som har hatt mer enn 15 timer med med meg. 
 
        </div> 
 
       </div>   
 
      </div> 
 
     </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="svg/gara3.svg" alt=""> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Oppfølgingsgaranti</h4> 
 
         Hver lørdag fra kl 0800-1200 setter jeg av en halvtime per elev til oppfølging. I stedet for å møte en gang hver uke, møtes vi to ganger i uken. Oppfølgingen er gratis. Oppfølgingsgarantien gjelder for alle elever. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-07 Duy Trinh

更改'.mb內容纏繞{顯示：表; }'到'.mb-content-wrap {display：block; }'幫助我：https://jsfiddle.net/zgLtbvyv/1/ – Picard

在CSS的微小變化：

.mb-content-wrap { 
    /*display:table;*/ 
    display:block; 
    overflow: hidden; 
}

來源

2017-05-07 12:12:00

謝謝阿拉姆。這是驚人的。 –

歡迎:) –

/*everything is in a column*/ 
 
.mb-flex-column{ 
 
display: flex; 
 
    flex-direction: column;  
 
} 
 
    
 
    
 
/*image and text are in a row*/ 
 
    .mb-flex-row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
     align-content: center; 
 
}  
 
/*Flex to aligne the image and text correctly, and make them stick to the side*/ 
 
.mb-flex-item:nth-child(odd) .mb-flex-row{ 
 
     flex-direction: row-reverse; 
 
    } 
 

 
.mb-content-wrap{ 
 
    word-wrap: break-word; 
 
    display:block; 
 
    overflow: hidden; 
 
} 
 
    
 
.mb-content{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
    } 
 
    
 
h4{ 
 
    text-align: left; 
 
    padding-top: 0; 
 
}

<div id=mb-gara-mobile> 
 
    <div class="mb-flex-column black"> 
 
       <div class="mb-flex-item"> 
 
        <div class="mb-flex-row"> 
 
         <div class="image-wrap"> 
 
          <img src="http://mathsmattersresources.com/wp-content/uploads/Right-Angle-Triangle-Blue-John-Duffield1.png" alt="" style="height:50px"> 
 
         </div> 
 
         <div class="mb-content-wrap"> 
 
          <div class="mb-content"> 
 
           <h4>Fornøydsgaranti</h4> 
 
            De to første øktene er gratis, og du kan kanslerere når du vil. 
 
            Fornøydsgarantien gjelder alle elever. 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="http://mathsmattersresources.com/wp-content/uploads/Right-Angle-Triangle-Blue-John-Duffield1.png" alt="" style="height:50px"> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Karaktergaranti</h4> 
 
         Jeg refunderer 100% av totalbeløpet dersom jeg feiler med å forbedre karakteren til eleven. Gjelder for elever med startkarkater: 2, 3 eller 4. 
 
         Karaktergarantien gjelder kun for elever som har hatt mer enn 15 timer med med meg. 
 
        </div> 
 
       </div>   
 
      </div> 
 
     </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="http://mathsmattersresources.com/wp-content/uploads/Right-Angle-Triangle-Blue-John-Duffield1.png" alt="" style="height:50px"> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Oppfølgingsgaranti</h4> 
 
         Hver lørdag fra kl 0800-1200 setter jeg av en halvtime per elev til oppfølging. I stedet for å møte en gang hver uke, møtes vi to ganger i uken. Oppfølgingen er gratis. Oppfølgingsgarantien gjelder for alle elever. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-07 12:19:11

令人驚歎的，謝謝你庫瑪爲你幫助我:) –

你的歡迎兄弟:) :) –

最小化窗口時文本丟失

回答

相關問題