how to add a line break only using css without br tag-CodePudding

<div id="auth_1"  style={{display:"flex"}} >
    <div >11</div>
    <div >77</div>
    <div >22</div>
    <div >44</div>
    <div >URL :66</div>
    <div >PHONE :33</div>
    <div >FAX :44</div>
 </div>

what i get: 11 77 22 44 URL :66 PHONE :33 FAX :44

what i need:

11 77 22 44

URL :66 PHONE :33 FAX :44

Please help me in solving this .plz.

i tried

  .url:before {
  content: '\a';
  white-space: pre;
}

but no result.

CodePudding user response：

use double :: not : to CSS before

.url::before {
  content: '\a';
  white-space: pre;
}

<div id="auth_1"   >
    <div >11</div>
    <div >77</div>
    <div >22</div>
    <div >44</div>
    <div >URL :66</div>
    <div >PHONE :33</div>
    <div >FAX :44</div>
 </div>

CodePudding user response：

You can use this property in css:-

content: '\a';

Please check this link for how to use it.

CodePudding user response：

Use the div to wrap items which are needed in a single row and apply flex and 
flex direction property to make them stay in a single row.

At Outer div apply flex direction as column to keep all items in a column.         

     <div
      id="auth_1"
      
      style={{ display: "flex", flexDirection: "column" }}
     >
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div className="prefix">11</div>
        <div className="givenname">77</div>
        <div className="familyname">22</div>
        <div className="suffix">44</div>
      </div>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div className="url">URL :66</div>
        <div className="phone">PHONE :33</div>
        <div className="fax">FAX :44</div>
      </div>
    </div>

I hope it solved you issue and gave your required output!