CSS如何实现H4与P首行同水平且P换行后与首行左对齐？

可以仅修改CSS实现需求，无需改动现有HTML结构，调整方案如下：

核心修改思路 #

将角色名（h4）设置为左浮动，对话内容（p）触发BFC避免文字环绕，即可同时满足「首行同水平」和「换行后对齐」两个要求。

需修改的CSS片段 #

替换原有CSS中h4、h4::after、h4+p、h4+p::after的相关规则即可：

h4 {    /* Character */
    margin-left: 0;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 0px;
    /* 新增规则，移除原有display: inline */
    float: left;
    clear: left;
    margin-right: 30px; /* 维持你原本设定的角色名与对话间距 */
}

h4::after {
    content: ":";
}

h4 + p { /* Dialogue */
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 20px; /* 控制对话段落下间距，替换原有伪元素实现 */
    text-align: left;
    /* 移除原有display: inline、margin-left:30px，新增以下规则 */
    overflow: hidden;
}

/* 原有h4 + p::after规则可以直接删除，已通过margin-bottom实现同等效果 */

效果说明 #

• float: left让角色名靠左浮动，clear: left保证每个角色名自动新起一行，不会和上方内容重叠
• 对话p设置overflow: hidden触发BFC特性，不会和左侧浮动的角色名重叠，所有行都会自动排在角色名右侧：第一行和角色名水平对齐，换行后的行也会和对话首行的开头垂直对齐，完全符合舞台剧剧本的排版要求
• 该方案支持不同长度的角色名自动适配，不需要手动固定角色名宽度，灵活度更高

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