如何在766px宽度下调整响应式布局，实现指定文本换行？

安全阿岳

2026-8-14

问题描述

我尝试让第二张示例图中的文本large size + price位于上方按钮下方，但在766px的响应式宽度下无法实现换行，求解决方案？

预览示例

完整响应式布局（显示正常）
第二个响应式布局（存在问题的布局）
第三个响应式布局（显示正常）

疑似问题代码

/* 响应式布局 */
@media (max-width:766px) {    
    .primary-info-list { white-space: pre-line; }
}

我已尝试white-space:pre-line;、display:inline-block以及外边距，这些方案在第三张图对应的尺寸下有效，但在766px的第二张图尺寸下无效。试过各种可能的方案后思路枯竭，希望得到帮助。

HTML代码

<li class="doglisting">
        
            <div id="membericon">
                <div id="memberpic">
                    <img src="https://i.pinimg.com/236x/3d/bf/6e/3dbf6ef3f3ef42954efb6a3df868c0de.jpg"/>
                </div>
            </div>

            <div class="infoBody">

                <div class="namelocation">
                    Name | Location <i class="fa-light fa-badge-check" title="verified"></i>
                </div>

                <div class="linkbuttons">
                    <span><a href="/">march 22 - anytime</a></span>  <span><a href="/">book</a> </span>
                </div>


                <ul class="primary-info-list">
                    Large size <i class="fa-solid fa-circle-small yeah"></i> $10 per hour
                </ul>



                <p>
                    Over 7 years experience working with animals of all shapes and sizes. Provide in home daytime, evening and overnight pet and exotic animal care including: dog walks; fed meals; gave treats; refilled water bowls; cleaned litter boxes and other messes; play and cuddle time; recorded date, time and description of services provided after each visit. Administered oral and topical medications as well as gave insulin injections.
                </p>
                
            </div>
        </li>

CSS代码

.linkbuttons {
    float:right;
}

.linkbuttons span {
    padding:5px 15px 5px 15px;
    border:1px solid #000;
    border-radius:10px;
    margin-right:10px;
}



doglisting {
    text-align: left;
    height: 175px;
    margin-top:20px;
    position: relative;
    display: flex;
    padding: 20px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height:auto;
    border-bottom:1px solid #000;
} 

.doglisting p {
    font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.doglisting .infoBody { height: auto; } 

.namelocation {
    color: #444;
    font-weight: bold;
    line-height: 29px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    font-size: 15px;
    margin-bottom:10px;
} 

.namelocation i { margin-left:5px; }

.doglisting .infoBody .primary-info-list {
    font-size: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    letter-spacing: 0.5px;
    display:inline-block;
} 

.doglisting .infoBody .primary-info-list li { display: inline; } 

.doglisting .infoBody .primary-info-list li::before { content: "\2022"; color:#444; } 
.doglisting .infoBody .primary-info-list li:first-child { margin-left: 0px; } 
.doglisting .infoBody .primary-info-list li:first-child::before { content:none; } 

.doglisting .membericon {
    float: left;
    margin-right: 30px;
    padding-top: 2px;
    margin-bottom: 10px;
    height: inherit;
    display: inline;
    padding-left:10px;
} 


#membericon #memberpic {
    height: 88px;
    width: 88px;
    margin-right: 15px;
}

#membericon #memberpic img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius:50%;
}

#membericon ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}


#membericon ul li {
    font-size: 15px;
  color: #939c9b;
  padding: 0 10px;
  position: relative;
}


#membericon ul li:before {
  content: "";
  height: 4px;
  width: 4px;
  position: absolute;
  top: 50%;
  background-color: #939c9b;
  border-radius: 50%;
  left: -2px;
  transform: translateY(-50%);
}
#membericon ul li:first-child {
  padding-left: 0;
}
#membericon ul li:first-child:before {
  display: none;
}
#membericon ul li:last-child {
  padding-right: 0;
}


@media (max-width:1200px) {
    .doglisting {
        border-bottom:1px solid #000;
        /*margin-bottom:50px;*/
    }
}

@media (max-width:991px) {
    .doglisting {
        height: auto;
        border-bottom:1px solid #000;
        /**margin-bottom:30px;**/

    }
}

/* 响应式布局 */
@media (max-width:766px) {    
    .primary-info-list { white-space: pre-line; }
}

@media (max-width: 768px) and (min-width: 1px) {
.doglisting {
    height: auto;
    margin-top:-15px;
    margin-right: 15px ;
    margin-left: 15px ;
    border-bottom:1px solid #000;
    margin-bottom:30px;
}


.doglisting p {
    font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}


.doglisting .infoBody {
    height: auto;
} 

.linkbuttons { float:left; margin-bottom:20px; white-space: pre-line; }
.primary-info-list { white-space: pre-line; }

}

解决方案

问题根源在媒体查询优先级冲突、浮动元素影响以及HTML结构不规范，按以下步骤修复：

合并冲突的媒体查询
你同时定义了max-width:766px和max-width:768px的媒体查询，后者范围包含前者，导致766px-768px区间内样式被覆盖。将所有小屏规则统一放到max-width:768px的查询中：

@media (max-width: 768px) {
  .doglisting {
      height: auto;
      margin-top:-15px;
      margin-right: 15px ;
      margin-left: 15px ;
      border-bottom:1px solid #000;
      margin-bottom:30px;
  }

  .doglisting p {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
  }

  .doglisting .infoBody {
      height: auto;
  } 

  .linkbuttons { 
      float:left; 
      margin-bottom:20px; 
  }
  .primary-info-list { 
      white-space: normal;
      clear: both;
      display: block;
  }
}

清除浮动并调整元素显示方式
给.primary-info-list添加clear:both强制它换行到浮动的按钮下方，同时设置display:block让它独占一行，替换white-space:pre-line为white-space:normal保证文本正常换行。
修正HTML结构
.primary-info-list是ul标签，内部必须包含li元素，否则会导致样式异常，修改为：

<ul class="primary-info-list">
  <li>Large size <i class="fa-solid fa-circle-small yeah"></i> $10 per hour</li>
</ul>

完成以上修改后，large size + price文本会在768px及以下宽度时自动换行到按钮下方，解决布局问题。

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

如何在766px宽度下调整响应式布局，实现指定文本换行？

预览示例 #

疑似问题代码 #

HTML代码 #

CSS代码 #

预览示例

疑似问题代码

HTML代码

CSS代码