kyun
kyun

Reputation: 10264

When I have long text, I have to make text-indent except first line

I have a problem with text-indent.

Here is the image what I want to make.

enter image description here

I don't want to use <li>.

I want to make custom list style.

Here is my code.

.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;
}
<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>

Upvotes: 0

Views: 68

Answers (2)

K K
K K

Reputation: 18099

Try this with margin:

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;
}

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2189/

Upvotes: 3

Hanif
Hanif

Reputation: 3795

Try this:

.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;
}

Upvotes: 2

Related Questions