如何在小型设备中的框中保留文本

Question

我用它们各自的列创建了两行...但是当我缩小页面时，最后一列的部分内容（标题）会从div 中伸出来。

    <div class="container">  
     <!------------------------------------ first section-------------------------------------------------->
     <div class="row" id="firstSection">
         <div class="col-xs-12">
            <span class="glyphicon glyphicon-tree-deciduous"></span>
           <h2 class="heading2">Your home away from home</h2>
           <h4>Prima luce, cum quibus mons aliud consensu ab eo. Praeterea iter est quasdam res ex<br/>communi.Etiam habetis sem dicantur magna mollis euismod.</h4>
           <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem id in inventore, maiores consequuntur modi? Omnis dolore quam vel. Illo accusantium, porro laudantium saepe necessitatibus id ullam voluptate nihil!<br/></p> 
         </div>
    </div>
     <!------------------------------------ end of first section-------------------------------------------------->
     <!------------------------------------ second section--------------------------------------------------> 
    <div class="row" id="secondSection">
            <div class="col-lg-6">
                <article class="section1">                             
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                    <h2>BUSINESS TRAVELLER</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi! and fre</p>
                    <button type="button" class="btn btn-default">READ MORE</button>              
                </article>      
            </div><!--  end of column --->
            <div class="col-lg-6">
                <section class="section2">
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                    <h2>ACCOMPANYING A LOVED-ONE</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p>
                    <button type="button" class="btn btn-default">READ MORE</button>
                </section>
            </div><!--  end of column --->       
     </div><!-- end of row -->
      <!------------------------------------ end of second section------------------------------------------->
</div><!-- end of container -->

CSS如下

.heading2{
font-family: 'Arizonia', cursive;
font-size: 50px;
text-align: center;
}
#firstSection{
background-color:#ffffff;
margin-left:1px;
margin-right:1px;
padding-top: 120px;
margin-top:-80px;
}
.section1{
background: #ffffff;
padding: 50px;
margin-top:30px;
}
.section2{
background: #ffffff;
padding: 50px;
margin-top:30px;
}

你也可以确认我的jsfiddle显示

https://jsfiddle.net/Wosley_Alarico/g8xj2yq4/

Answer 1

如果您

同意标题在任何两个字母中间中断，则可以将word-break: break-all;添加到.section 2中：

.section2{
    background: #ffffff;
    padding: 50px;
    margin-top:30px;
    word-break: break-all;
}

但是，我个人宁愿使用以下内容设置相对于显示宽度的字体大小：

.section2 h2 {
  font-size: 4vw;
}

或者使用媒体查询更改不同屏幕宽度的字体大小：

@media (max-width: 500px){
    h2 {
        //set whatever font-size you want for headers
    }
    p {
        //set font-size for p
    }
}

Answer 2

通过使用@media查询在设备较小时缩小文本。

例如

@media screen and (max-width:480px){
  h2 {
    font-size:14px;
  }
}

Answer 3

你可以做这样的事情来打破长词

h2 {
  word-break: break-word;
}

但这不是很漂亮。更好的选择是使用媒体查询来调整字体大小

@media screen and (max-width: 480px) {
    h2 {
        font: 12px;
    }
}