使用 CSS 正确对齐换行文本答案

【问题标题】：Align wrapping text correctly using CSS使用 CSS 正确对齐换行文本
【发布时间】：2014-06-27 03:11:35
【问题描述】：

这可能是一个完全愚蠢的问题。这是我的问题 - 我有一个以 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 在内的几个网站，所有解决方案似乎都非常复杂。所以我在这里发帖看看是否有一种快速简便的方法来做到这一点。

【问题讨论】：

为什么会有&nbsp; ？这会创建额外的空间，还会删除 </span> 和消息开头之间的任何空格。

标签： html css twitter-bootstrap alignment

【解决方案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

【讨论】：

感谢您的回答 - 让我试试
由于其他东西的出现，我没有玩太多。我很快就会检查出来 - 这绝对是这样做的方法

【解决方案2】：

如何将您的消息包装在它自己的 span 中并将其样式设置为具有 15px 的左边距或信息图标的任何宽度？你不能这样做吗？如果是这样，您可以在

上设置样式

.alert .alert-info {
    margin-left:15px;
}

然后将跨度上的边距设置为 0

div .glyphicon glypicon-information{
    margin: 0;
}

【讨论】：