Question

我应该是一个非常基本的CSS问题。我想证明这个div中的文本就像你在报纸上看到的那样。我无法理解为什么拒绝这样做。

以下是我正在尝试的示例的代码。我希望所有的字母都齐平，这样就可以创建一个盒子。谢谢！

<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

首先，text-justify早已从支持

下垂

您需要考虑文本格式的工作方式。当您使用<br>时，您将提交结束该文本字符串的单个换行符。所以没有额外的空间来证明这一点，因为这就是结束的地方。

<p> <p>将它们全部包裹在500px中也会发生同样的情况，因为你告诉它停止那里想象三个单词的句子看起来有多么合理width

您要做的唯一方法是设置一个固定的#where_we_are_factoid { font-size: 22px; font-weight: 200; width: 220px; float: right; } #where_we_are_factoid p { text-align: justify; } #where_we_are_factoid span { font-size: 39px; font-weight: 600; }并尝试尽可能接近您想要的结果。

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

span class

或者你可以使用多个var wrapper = element.retrieve('wrapper'), styles = element.getStyles('margin', 'position', 'overflow'); if (options.hideOverflow) styles = Object.append(styles, {overflow: 'hidden'}); if (options.wrapper) wrapper = document.id(options.wrapper).setStyles(styles); if (!wrapper) wrapper = new Element('div', { styles: styles }).wraps(element);并填充地狱，让它按照你想要的方式排列。

Answer 2

逐行校对可以通过添加额外的标记来完成，但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>

Answer 3

这个问题和我回答的另一个问题一样 - 这可能会对你有帮助：How to determine largest possible font-size such that it fits on one line in CSS

如果您不介意使用javascript库，fittext.js可以完成您的工作并以相应的方式工作（在不同的设备宽度）。绝对将每个句子放在一个单独的span元素中，以保证结构的完整性。

查看另一个帖子，另一张海报建议使用css calc和等宽字体，它也能起作用：http://codepen.io/anon/pen/rVvWEW

在div

3 个答案: