html - Indent 2nd line of a paragraph to line up with first line?

Question

I am using Font Awesome to add icons to p:before selectors and I am wondering how I can indent only the 2nd line of the paragraph so that the text is aligned.

Here is what my current output looks like:

And here is what I am trying to accomplish:

Here is my code:

<div class="result>
   <p class='fa location'>{{ address }}<br/>{{ citystate }}</p>
</div>

And here is my CSS:

.result .location:before {
    content: "\f041";
    padding-right:6px;
    color:#b3b3b3;
}

Is it possible to accomplish this as-is? Or will I need to restructure my code to achieve this effect?

Answer 1

将整个段落填充到右侧，然后将 fontawesome 图标拉到左侧以填充创建的空间。

.result {
    padding-left: 30px;
}

.result .location:before {
    content: "\f041";
    color:#b3b3b3;
    margin-left: -10px;
    padding-right: 2px;
}

jsfiddle

Answer 2

您可以在 之后添加一些内容<br />并使您的代码如下所示：

<div class="result>
   <p class='fa location'>{{ address }}<br/>&nbsp;&nbsp;{{ citystate }}</p>
</div>

添加 直到它被移动到你需要的地方。

我希望这对你有所帮助。