在Text break的第二行之前添加空格

Question

如何在不使用@nbsp;

的情况下在div文本的第二行之前添加空格

当前

预期

div{
  width:200px;
}
div::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #a6a9aa;
    display: inline-block;
    margin-right: 10px;
}

<div> Some Long Long Link Text will come Here </div>

Answer 1

您可以使用<ul>代替

ul {
  list-style-type: circle;
}

li {
  max-width: 150px;
  word-break: break-all;
}

<ul>
  <li>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  </li>
  <li>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  </li>
  <li>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  </li>
</ul>

Answer 2

div{
  width:200px;
  
  margin-left: 15px;
}
div::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #a6a9aa;
    display: inline-block;
    margin-right: 10px;
    
    
    margin: auto 5px auto -15px;
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

试试这个。

Answer 3

您可以将 margin-bottom 添加到：before元素，然后将其设置为浮动：

div {
  width: 200px;
}

div::before {
  content: "";
  float: left;
  width: 6px;
  height: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #a6a9aa;
  margin-right: 10px;
  margin-bottom: 20px;
}

<div> Some Long Long Link Text will come Here </div>

Answer 4

检查一下。希望它有所帮助

＆＃13;

＆＃13;

REG_EXTENDED

＆＃13;

div{          
    position: relative;
    padding-left: 18px;
    width:200px;
}
div::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 5px;
    left: 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #a6a9aa;
    display: inline-block;
    margin-right: 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用 CSS定位来实现此目标，使div定位relative＆amp; div::before定位absolute。像：

div {
  width:200px;
  padding-left: 16px;
  position: relative;
}

div::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
}

请看下面的代码段：

div{
  width:200px;
  padding-left: 16px;
  position: relative;
}
div::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #a6a9aa;
    display: inline-block;
    margin-right: 10px;
}

<div>Some Long Long Link Text will come Here</div>

  

顺便说一句，您也可以使用<ul></ul>。

希望这有帮助！

Answer 6

＆＃13;

＆＃13;

div {
    width:200px;
    padding-left: 20px;
}

div::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #a6a9aa;
    display: inline-block;
    margin-right: 10px;
    position: absolute;
    left: 10px;
    top: 13px;
}

＆＃13;

<div> Some Long Long Link Text will come Here </div>

＆＃13;

＆＃13;

＆＃13;