css - 对齐 div 内的内容

Question

我有一个应该是非常基本的 CSS 问题。我想证明这个 div 中的文本就像您在报纸上看到的那样。我真的不明白为什么它拒绝这样做。

下面是一个代码笔，其中包含我正在尝试做的示例。我希望所有的字母齐平，这样它就创建了一个盒子。谢谢!

http://codepen.io/anon/pen/RPYJqo

<div id="where_we_are_factoid"><p>Corporate Learning<br>
Centers are located on<br>
<span>3 continents,</span><br>
in 4 countries and 27 states</p></div>

#where_we_are_factoid {
  font-size: 22px;
  font-weight: 200;
  float: right;
  width: 260px; 
}
#where_we_are_factoid p {
  text-align: justify;
  text-justify: inter-word;
}
#where_we_are_factoid span {
  font-size: 39px;
  font-weight: 600;
}

Answer 1

逐行对齐可以通过添加额外的标记来完成，但是CSS有点复杂。

根据使用的文字和父级 div 的整体宽度，排版可能看起来有点令人不快，因此可能需要进行一些试验。

我的示例是概念验证，实际使用仍有待评论和争论。

#where_we_are_factoid {
  font-size: 22px;
  font-weight: 200;
  width: 260px;
  float: right;
}
#where_we_are_factoid span {
  text-align: justify;
  display: block;
  line-height: 1.20em;
  height: 1.20em;
}
#where_we_are_factoid span:after {
  content: '';
  display: inline-block;
  width: 100%;
  vertical-align: top;
  height: 0;
}
#where_we_are_factoid span.bold {
  font-size: 39px;
  font-weight: 600;
}

<div id="where_we_are_factoid">
  <span>Corporate Learning</span>
  <span>Centers are located on</span>
  <span class="bold">3 continents,</span>
  <span>in 4 countries and 27 states</span>
</div>