如何将 space 放在下一行的前面

Question

我正在尝试在 bootstrap 或 css

中实现这样的效果

<div class="col-xs-2">Description</div>
<div class="col-xs-4">: I am a noob</div>

我得到以下结果：

Description    : I am a 
               noob

我该怎么做？

Description    : I am a 
                 noob

Answer 1

你可以添加一些  (html space)，你会得到你想要的。其他希望抓住 <div> 中的最后一个词然后设置 <div> 的样式以向左留几个像素

Answer 2

您可以使用伪元素插入 : 并保留文本中的 space：

<div class="col-xs-6 doublep"><span>I am a noob</span></div>

.doublep {
  font-size: 0;
  white-space: nowrap;
}
.doublep:before {
  width: 15px;
  text-align: Center;
  font-size: 14px;
  content: ":";
  display: inline-block;
  vertical-align: top;
}
.doublep span {
  white-space: normal;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
}

勾选这个BootplyDemo

如何将 space 放在下一行的前面

How to put a space in front of a next line

html

css

twitter-bootstrap