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

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

E.g。

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

Answer 2

如果您可以在任意两个字母的中间打破标题，则可以将console.log(subject.value); // will print the current value添加到word-break: break-all; 2：

.section

但是，我个人宁愿相对于显示宽度设置字体大小，例如：

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

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

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

Answer 3

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

h2 {
  word-break: break-word;
}

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

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

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

3 个答案: