CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
randomuser1
randomuser1

Reputation: 2803

How can I align my paragraphs in CSS/bootstrap properly?

I have a couple paragraphs on my webpage and each of them starts with a dash:

<p>- some longer text is here (...) some longer text is here </p>
<p>- some longer text is here (...) some longer text is here </p>
etc.

It's visible on my page as:

- some longer text is here some longer text is here
some longer text is here some longer text is here s
ome longer text is here some longer text is here so
- some longer text is here some longer text is here
some longer text is here some longer text is here s
ome longer text is here some longer text is here so

Instead, I want the dashes to be more visible, so the final effect would be:

- some longer text is here some longer text is here
  some longer text is here some longer text is here s
  ome longer text is here some longer text is here so
- some longer text is here some longer text is here
  some longer text is here some longer text is here s
  ome longer text is here some longer text is here so

How can I achieve it in CSS/bootstrap? Here is my very basic fiddle: http://jsfiddle.net/azxpckg5/3/ thanks!

Upvotes: 0

Views: 68

Answers (2)

m0bi5
m0bi5

Reputation: 9472

If you dont want to use the content property of css here is an alternative:

HTML:

<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here</p>
<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>

CSS:

.id
{
    display:inline-block;
}
p
{
    margin-top:-17px;
    padding-left:10px;
}

Upvotes: 1

justinw
justinw

Reputation: 3976

You could use a ::before pseudo element. Check out this fiddle.

p {
    padding-left: 10px;
}

p::before {
    position: absolute;
    left: 0;
    content:'-';
}
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>

Upvotes: 4

Related Questions