HTML/CSS图文容器描述未紧接标题显示原因及溢出省略实现咨询

问题原因 #

1. 浏览器默认给<h6>块级元素预设了上下外边距，这是标题和描述之间出现多余空白的核心原因，和你用<p>还是<span>承载描述内容无关。
2. 原生overflow: clip只会直接裁切溢出内容，需要额外配置文本溢出属性才能实现省略号效果。

解决方案 #

方案一（推荐，优化布局避免浮动问题）

先调整HTML结构，将右侧标题和描述统一包裹在独立容器中，更便于布局控制：

<div class="wc">
    <img src="win11" alt="图片加载失败">
    <div class="content-right">
        <h6>安装Windows时如何解决“安装程序无法创建新的系统分区，也无法定位现有系统分区”报错</h6>
        <p class="dsc">只需不到3分钟，你就可能遇到在设备上安装Windows时最古怪也最烦人的报错之一。该问题通常出现在重装Windows时，哪怕你选择全新安装也可能触发。</p>
    </div>
</div>

对应修改CSS样式：

h6 {
    color: rgba(0,0,0,0.9);
    font: 1.5em Tahoma, Arial;
    font-weight: bold;
    text-align: left;
    margin: 0 0 8px 0; /* 清除默认上下外边距，仅保留底部小间距分隔标题和描述 */
}

.wc {
    background-color: #F9F9F9;
    max-width: 1024px;
    height: 180px;
    overflow: hidden;
    display: flex; /* 用flex布局替代浮动，避免浮动带来的高度塌陷、排版错位问题 */
    gap: 5px; /* 替代图片的右外边距实现间距 */
}

.wc img {
    width: 300px;
    height: 180px;
    flex-shrink: 0; /* 避免图片被挤压变形 */
}

.content-right {
    flex: 1; /* 占满图片外的剩余宽度 */
    padding-top: 4px; /* 可根据视觉效果调整顶部内边距 */
}

.dsc {
    color: rgba(0,0,0,0.7);
    font: 1.3em Calibri, Arial;
    margin: 0; /* 清除段落默认外边距 */
    /* 以下为多行文本溢出显示省略号的配置 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 自定义最大显示行数，超出后自动显示省略号 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

方案二（不改动原有HTML结构）

如果不想调整原有HTML，只需要修改对应CSS样式即可解决问题：

h6 {
    color: rgba(0,0,0,0.9);
    font: 1.5em Tahoma, Arial;
    font-weight: bold;
    text-align: left;
    margin: 0 0 8px 0; /* 关键：清除h6默认的上下外边距 */
}

.dsc {
    color: rgba(0,0,0,0.7);
    font: 1.3em Calibri, Arial;
    /* 多行文本溢出显示省略号配置 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

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