如何为文本首行添加缩进且不打乱现有列布局？

首先得说，你原来的代码里有个明显的结构错误——那个.indent的<div>没有闭合，而且还把<p>标签的一部分包在了里面，这本身就会让浏览器的渲染引擎混乱，进而打乱布局。先把这个结构问题修正，再来看缩进的实现方式。

你之所以会遇到布局错乱，核心原因是用<div>去包裹了段落的部分内容，破坏了原本的<p>标签嵌套结构（HTML里<p>不能包含块级元素比如<div>），浏览器会自动修正这种错误，结果就导致布局走样了。

给你两个靠谱的解决方案，都能实现让"EDUCATION"和"WORK EXPERIENCE"有相同缩进，且不打乱列布局：

方案一：用<span>包裹标题文本（适合不想改变现有结构的情况） #

保持你现有的CSS不变，只调整HTML结构，把需要缩进的标题文本用行内元素<span>包裹，然后给这个<span>加上.indent类：

.indent { 
  text-indent: 70px; 
  word-break: break-word; 
}

<div class="column">
  <p><span class="indent">EDUCATION</span><br>
  2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.<br></p>
  
  <p><span class="indent">WORK EXPERIENCE</span><br>
  <!-- 这里填入你的工作经验内容 -->
  </p>
</div>

方案二：把标题设为独立元素（更规范的语义化写法） #

从语义化角度来说，"EDUCATION"和"WORK EXPERIENCE"属于区块标题，用<h3>这类标题标签更合适，然后统一给这些标题标签设置缩进样式，这样结构更清晰，也不会干扰段落内容的布局：

.section-title {
  text-indent: 70px;
  margin: 0; /* 消除标题默认的上下外边距，避免多余间距 */
}
.column p {
  margin: 0.5em 0; /* 按需调整段落的上下间距，提升可读性 */
}

<div class="column">
  <h3 class="section-title">EDUCATION</h3>
  <p>2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.</p>
  
  <h3 class="section-title">WORK EXPERIENCE</h3>
  <p>
    <!-- 这里填入你的工作经验内容 -->
  </p>
</div>

两种方案都能实现你要的缩进效果，而且不会破坏列布局。优先推荐方案二，因为语义化的HTML结构不仅利于维护，对SEO也更友好~

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