如何仅使用CSS添加换行符而不使用br标记

Question

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

得到的结果:11 77 22 44网址:66电话:33传真:44

what I need:

11 77 22 44

URL:66 PHONE:33 FAX:44

请帮我解决这个问题。

我试着

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

但没有结果。

Answer 1

使用double:: not: to CSS

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

<div id="auth_1" class="auth"  >
<div class="prefix">11</div>
<div class="givenname">77</div>
<div class="familyname">22</div>
<div class="suffix">44</div>
<div class="a url">URL :66</div>
<div class="phone">PHONE :33</div>
<div class="fax">FAX :44</div>
</div>

Answer 2

你可以在css中使用这个属性:-

内容:' ';

请点击此链接了解如何使用

Answer 3

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"
class="auth"
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!