使用Media Query后响应式菜单布局异常及文本溢出求助

问题概述 #

需要实现一个包含鸡肉、牛肉、寿司的响应式菜单页面，布局要求：

• 屏幕宽度≥992px：三个盒子各占33.33%宽度，同行显示
• 768px≤宽度≤991px：前两个盒子各占50%宽度，第三个盒子占100%宽度
• 宽度≤767px：三个盒子均占100%宽度

当前存在的问题：

1. 宽度＞992px时盒子未在同一行
2. 宽度＜992px时盒子重叠（已设置20px margin）
3. 窗口缩小时文本溢出盒子，需求除word-wrap外的文本溢出解决办法

核心问题排查 #

1. 固定宽高冲突：给div设置了固定width:400px和height:200px，直接覆盖了媒体查询的百分比宽度，固定高度还导致文本无法撑开容器而溢出
2. 布局偏移：section设置了position:relative; top:150px; left:20px，额外增加了偏移量，结合margin导致盒子重叠
3. 宽度计算误差：百分比宽度未考虑margin占用的空间，总宽度超过父容器，导致盒子换行

修复后的完整代码 #

HTML代码 #

<body>
   <h1>Our Menu</h1>
   <div class="menu-container">
      <section>
         <div class="column-lg-4 colmn-md-6 colmn-sm-12">
            <p class="p1"><b>Chicken</b></p>
            <p class="food">The country that consumes the greatest amount of chicken is the United States. Every year, the United States consumes approximately 15,000 metric tons of chicken, placing it significantly in front of the second-place region. The United States adds chicken to just about everything.</p>
         </div> 
      </section>
      <section>
         <div class="column-lg-4 colmn-md-6 colmn-sm-12">
             <p class="p2"><b>Beef</b></p>
             <p class="food">Beef is the culinary name for meat from cattle. In prehistoric times, humankind hunted aurochs and later domesticated them. Since that time, numerous breeds of cattle have been bred specifically for the quality or quantity of their meat.</p>
         </div>
      </section>
      <section>
          <div class="column-lg-4 colmn-md-12 colmn-sm-12">
              <p class="p3"><b>Sushi</b></p>
              <p class="food">Sushi is a Japanese dish of prepared vinegared rice, usually with some sugar and salt, accompanied by a variety of ingredients, such as seafood—often raw—and vegetables. Styles of sushi and its presentation vary widely, but the one key ingredient is "sushi rice", also referred to as shari, or sumeshi.</p>
          </div>
      </section>
   </div>
</body>

CSS代码 #

* {
    box-sizing: border-box;
}

body {
    background-color: white;
    margin: 0;
    padding: 0 20px;
}

h1 {
    text-align: center;
    font-family: cursive;
    margin-top: 30px;
}

.menu-container {
    overflow: hidden; /* 清除浮动 */
    margin-top: 20px;
}

section {
    float: left; /* 让section浮动，实现同行布局 */
}

div {
    border: 2px solid black;
    margin: 20px;
    background-color: rgb(104, 98, 98);
    height: auto; /* 取消固定高度，让内容撑开 */
}

.p1 {
    border: 1px solid black;
    width: 150px;
    height: 25px;
    padding: 1px;
    text-align: center;
    float: right;
    margin: 0;
    background-color: rgb(240, 145, 145);
    font-family: cursive;
}

.p2 {
    border: 1px solid black;
    width: 150px;
    height: 25px;
    padding: 1px;
    text-align: center;
    float: right;
    margin: 0;
    color: white;
    background-color: brown;
    font-family: cursive;
}

.p3 {
    border: 1px solid black;
    width: 150px;
    height: 25px;
    padding: 1px;
    text-align: center;
    float: right;
    margin: 0;
    background-color: rgb(247, 247, 153);
    font-family: cursive;
}

.food {
    padding: 15px;
    font-family: cursive;
    margin: 0;
    /* 文本溢出方案1：滚动条 */
    max-height: 180px;
    overflow-y: auto;
    /* 文本溢出方案2：多行省略（二选一） */
    /* display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}

/* Large Devices (Desktop Version) */
@media (min-width: 992px) {
    .column-lg-4 {
        width: calc(33.33% - 40px); /* 减去左右margin总和20*2=40px */
    }
}

/* Medium Devices (Tablet version) */
@media (min-width: 768px) and (max-width: 991px) {
    .colmn-md-6 {
        width: calc(50% - 40px); /* 减去左右margin总和 */
    }

    .colmn-md-12 {
        width: calc(100% - 40px); /* 减去左右margin总和 */
    }
}

/* Small Devices (mobile version) */
@media (max-width: 767px) {
    .colmn-sm-12 {
        width: calc(100% - 40px); /* 减去左右margin总和 */
    }
}

除word-wrap外的文本溢出解决办法 #

1. 滚动条方案 #

给.food设置max-height和overflow-y:auto，当内容高度超过设定值时，自动显示垂直滚动条，用户可以滚动查看全部内容，不破坏容器布局：

.food {
    max-height: 180px;
    overflow-y: auto;
}

2. 多行省略方案 #

使用CSS的-webkit-line-clamp属性实现固定行数后显示省略号，适合不需要用户查看全部内容的场景（注意：仅webkit内核浏览器支持，如需兼容其他浏览器需用JavaScript辅助）：

.food {
    display: -webkit-box;
    -webkit-line-clamp: 6; /* 显示6行后省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Dhruv Pandey