我如何使第一行文本缩进而又不影响其他所有内容？

Question

I would like to indent the text as I have done with the second heading WORK EXPERIENCE but if I apply this class to the first line 'EDUCATION' it throws out all my columns, how can I avoid this?

code:

 .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

Close the p element after EDUCATION word and then the indentation will apply only to the heading line and not to all block of text.

<div class="column">
     <p class="indent">EDUCATION</p>
     <p>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 2

<div class="column">
    <p class="indent">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</p>
    </div>
</div>

This will work and you will get output as

I guess, I am understanding your question correctly

Answer 3

If you want to use you markup you can wrap the indented text by your class.

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. */
}

My Suggestion

<!-- 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.*/
}

Answer 4

Try this below. There is no need to use br tags instead you can add margin bottom to the p element. See the CSS class rules below.

CSS

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

HTML

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

JSFiddle sample link

https://jsfiddle.net/k1vjvkt7/