缩进段落的第二行以与第一行对齐？

Question

我正在使用Font Awesome在选择器之前向p：添加图标，我想知道如何只缩进段落的第二行以便文本对齐。

以下是我目前的输出结果：

这就是我想要完成的事情：

这是我的代码：

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

这是我的CSS：

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

是否有可能按原样实现这一目标？或者我是否需要重构我的代码以实现此效果？

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>

添加 ，直到它根据您的需要移动为止。

我希望能帮到你。