CSS 浮动布局：子元素宽度等于父级并实现字符超长换行

日期: 2025-03-19

标签: 常规

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget velit vel feugiat. Donec vel bibendum nulla. Nam euismod, dolor at consectetur lacinia, magna purus faucibus ante, ac pharetra libero enim vitae velit. Sed vitae eros vel lectus bibendum dignissim. Fusce vel pretium lectus. Sed auctor felis in mauris pellentesque, id luctus erat efficitur.

.parent {
  width: 400px;
  border: 1px solid #ccc;
  overflow: hidden; /* 清除浮动 */
}

.child {
  float: left;
  width: 100%; /* 子元素的宽度等于父级的宽度 */
  word-wrap: break-word; /* 字符超长换行 */
}

效果如下图所示：

浮动布局子元素的width等于父级的width字符超长换行

原文地址: https://www.cveoy.top/t/topic/olU0 著作权归作者所有。请勿转载和采集!