跨度左对齐文本“围绕”其他跨度文本

Question

我有一个用户评论的显示。

我希望显示用户名（使用不同的样式），然后在同一行后显示注释（如有必要，还显示以下行）

这是我现在所处的小提琴：

https://jsfiddle.net/41y6ycf4/3/

以下是小提琴的代码：

HTML

<div class="col-sm-4">
<span class="user">Remus </span>
<span class="comment"> This is my user's comment And I am making it large so that it makes sense for this example</span>
</div>

CSS

.user {
  font-weight: 900;
}

.comment {
  display: block;
  text-align: left;
  color: #999999;
}

我意识到，如果我摆脱display: block和text-align: left，它将完全按照我想要的方式显示。

但是，我必须明确定义左对齐，因为我的网站上有许多其他默认样式，目前正在将它对齐。

编辑1

如果您没有将显示定义为块或内联块，则看起来对于跨度，则text-align不会生效。但是，如果我确实以这种方式定义显示，那么它会为评论创建一个新行（而不是我想要的）

Answer 1

浮动名称可以满足您的需求：

.user {
font-weight: 900;
float: left;
}