如何在CSS / bootstrap中正確對齊段落？

Question

我的網頁上有幾個段落，每個段落都以破折號開頭：

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

在我的頁面上顯示為：

- 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

相反，我希望破折號更加可見，因此最終效果將是：

- 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 

如何在CSS / bootstrap中實現它？ 這是我非常基本的小提琴： http : //jsfiddle.net/azxpckg5/3/謝謝！

Answer 1

您可以使用::before 偽元素 。 看看這個小提琴 。

 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> 

Answer 2

如果你不想使用content的CSS財產這里是一個另類：

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