html - 如何使第一行文本缩进而不丢弃其他所有内容？

Question

我想缩进文本，就像我对第二个标题 WORK EXPERIENCE 所做的那样，但是如果我将此类应用于第一行“教育”，它会抛出我所有的列，我怎么能避免这个？

代码:

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

<div class="column">
  <p>EDUCATION<br> 2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.<br></p>
  <div class="indent">
    <p>WORK EXPERIENCE<br>
  </div>

Answer 1

如果你想使用你的标记，你可以用你的类包装缩进的文本。

HTML

    <div class="column">
        <p><span class="indent">EDUCATION</span>
            2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.
        </p>
        <p><span class="indent">WORK EXPERIENCE</span></p>
    </div>

CSS

.indent{
    text-indent: 70px;
    display:block; /* Added to force the span acting as a block to avoid <br> tag*/
    /*word-break: break-word; I don´t think you need this property. */
}

我的建议

<!-- The H3 heading it´s a suggestion, and you can always chose from the H1 -  H6 dependeng on your needs -->
<div class="column">
    <h3 class="indent">Education</h3> 
    <p>2014-18 Massey University Wellington, New Zealand. Bachelor of Design, Honours First Class. Visual Communication Design.</p>
    <h3 class="indent">Work Experience</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus elit tellus, dapibus cursus orci.</p>
</div>

.indent{
    text-indent: 70px;
    text-transform:uppercase;
    display:block; /* This one is optional in the suggested markup.*/
}