html - 使用 CSS 正确对齐换行文本

Question

这可能是一个完全愚蠢的问题。这是我的问题 - 我有一个以 HTML 格式显示的消息框(使用 Bootstrap)来显示各种用户警报。它有一个信息图标(使用 bootstrap glyphicons)和相关的消息。除非消息太长，否则一切看起来都很好。然后第二行将包裹在图标下。我希望多行从第一行开始的地方开始换行。

所以这是错误的:

(i) This is an incorrect
format of the message

这是对的:

(i) This is the correct
    format I want 

我的 HTML/CSS 非常简单:

<div class='alert alert-info'>
<span class='glyphicon glyphicon-information'></span>
&nbsp my message comes here.
</div>

但我查看了几个站点，包括 css-tricks，所有的解决方案似乎都非常复杂。所以我在这里发帖，看看是否有快速简便的方法来做到这一点。

Answer 1

您可以玩 CSS 定位，您需要做的是，使用 margin-left: 30px; 将整个元素推到左侧，然后分配 position: relative; 到容器元素，以便我们确保 absolute 定位的元素不会在野外流出。

现在我们使用 position: absolute; 作为您的字形图标，并使用负的 left 值和正的 top 值来正确设置图标，请根据您的要求调整这些值，其余保持不变

.alert {
    margin-left: 30px;
    width: 50px;
    position: relative;
}

.alert .glyphicon {
    position: absolute;
    left: -15px;
    top: 2px;
}

Demo