当我有长文本时，除了第一行

Question

我的文字缩进有问题。

以下是我想要制作的图片。

我不想使用<li>。

我想制作自定义列表样式。

这是我的代码。

＆＃13;

＆＃13;

.dotted-style{
  width: 200px;
  word-break: break-all;
}

.dotted-style::before{
  display: inline-block;
  content: '';
  width: 4px;
  height: 4px;
  background-color: gray;
  border-radius: 100%;
  margin: auto 5px;
  vertical-align: middle;
}

＆＃13;

<p class="dotted-style">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus aliquam non aspernatur reprehenderit, velit, laboriosam harum aut dolorum, quasi a iure maiores. Eos laboriosam exercitationem quasi magni doloribus fuga rerum?
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用保证金：

<强> CSS：

.dotted-style {
  width: 200px;
  word-break: break-all;
  margin-left: 15px;/*added*/
}

.dotted-style::before {
  display: inline-block;
  content: '';
  width: 4px;
  height: 4px;
  background-color: gray;
  border-radius: 100%;
  margin: auto 5px auto -10px;/*modified*/
  vertical-align: middle;
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2189/

Answer 2

试试这个：

.dotted-style{
  width: 200px;
  word-break: break-all;
  position:relative;
  padding-left:15px;
}

.dotted-style::before{
  display: inline-block;
  content: '';
  width: 4px;
  height: 4px;
  background-color: gray;
  border-radius: 100%;
  margin: auto 5px;
  vertical-align: middle;
  position:absolute;
  left:0;
  top:10px;
}