鼠标悬停box时文本换行问题的CSS修复方案咨询

没问题，完全可以只通过CSS修复这个问题！先拆解下问题根源，再给你调整后的完整代码：

问题原因 #

1. 默认情况下元素的box-sizing是content-box——这意味着你给.hover-effect加的10px边框会额外增加元素总宽度，导致它超出父容器.col-md-4的空间，挤压内部文本区域，最终造成换行。
2. .box没有设置position: relative，导致.box-content的绝对定位是相对于更外层容器，定位逻辑混乱，也间接影响了文本布局。

修复后的CSS代码 #

.box { 
  height: 300px; 
  position: relative; /* 让内部绝对定位元素以当前box为参照 */
}
.box .box-image { 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  height: 100%; 
  width: 100%; /* 填满整个a标签宽度，避免空白区域 */
}
.box .box-content { 
  position: absolute; 
  left: 40px; 
  bottom: 40px; 
  z-index: 1; /* 确保文本在背景图片上方显示 */
}
.box .box-content h5, .box .box-content p { 
  color: #fff; 
  margin: 0; /* 移除默认外边距，避免不必要的空间占用 */
}
.box a.hover-effect { 
  display: block; 
  height: 100%; 
  width: 100%; 
  position: relative; 
  box-sizing: border-box; /* 核心：边框包含在元素尺寸内，不会撑大元素 */
}
.box:hover .hover-effect { 
  border: 10px solid blue; 
}

关键修改说明 #

• box-sizing: border-box：这是解决换行问题的核心，它让元素的宽度/高度包含边框和内边距，添加边框后不会改变元素总尺寸，自然不会挤压文本空间。
• .box添加position: relative：修正绝对定位的参照容器，让文本位置更准确，不会出现偏移。
• .box-image的width改为100%：确保背景图片容器填满整个点击区域，避免出现空白。
• z-index: 1给.box-content：保证文本始终显示在背景图片上方，不会被遮挡。
• 移除h5的默认margin：避免浏览器默认样式带来的布局偏移。

这样修改后，鼠标悬停添加边框时，元素尺寸不会变化，文本也就不会出现意外换行的情况了，视觉效果完全符合预期～

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