css - 高级 CSS 技巧 : Capital Initial Letters (Drop Caps) within a CSS3 Multicolumn

Question

大约一年后，multicolumn css3 属性逐渐成熟，得到了许多浏览器的支持。最终在您的网站上实现它以获得更好的设计和可读性的原因。我想让我们挑战极限，在多栏中采用古老但永远如此美丽的首字下沉(=第一个大首字母)。 但是，某些屏幕宽度会破坏 FireFox 中的多列布局。我做错了什么？

see jsfiddle DEMO

调整窗口宽度时，您可以在 IE 和 Firefox 中看到布局的跳跃/中断。下面举个例子。坚持是什么导致了多列未对齐的缺陷!？

---

---

对不起我的大 mustache 另一个 self 自画像:我忘了刮 mustache ，整天盯着这个问题看，没有时间整理。我向你保证，一旦这个问题得到解决，你就会得到一张干净整洁的剃光肖像!

---

---

在 Internet Explorer 11 的大多数屏幕宽度中存在更多对齐问题。Curious Safari 和 Chrome 在所有浏览器屏幕宽度下完美显示布局，没有破损。

---

#multicolumn {
         column-count: 3;
    -moz-column-count: 3;
 -webkit-column-count: 3;
         column-gap: 53px;
    -moz-column-gap: 53px;
 -webkit-column-gap: 53px;
         column-rule-color: #EEE;
    -moz-column-rule-color: #EEE;
 -webkit-column-rule-color: #EEE;
         column-rule-style: solid;
    -moz-column-rule-style: solid;
 -webkit-column-rule-style: solid;
     column-rule-width: 1px;
    -moz-column-rule-width: 1px;
 -webkit-column-rule-width: 1px;
}

#multicolumn p:first-letter{
    float:left;
    font-weight:normal;
    font-size:44px;
    margin: 7px 1px 0px 0px;
    line-height:27px;
    background-color:#AEE;
}

Answer 1

首先我想说，多栏布局模块的使用还是不推荐的。

主要是因为缺少对break-before、break-after、break-inside属性的支持，IE除外10+ 和专有的 -webkit-column-break-* 属性(参见:CSS3 Multiple column layout)。
(您可能还想看看我对这个 SO 问题的回答:IE (11) improper handling of CSS multi-columns?)

另外你必须记住，有一个所谓的“multi-column pseudo-algorithm”，它似乎被你的 :first-letter 选择器混淆了。

您可以通过使用带有 class 属性的 span 元素来避免这个问题。

但由于第一个字母比文本的其余部分大，因此出现了另一个问题。
可能会发生以下情况:带有首字下沉的段落开头的(单)行文本可能适合前一列，而首字下沉(大约是普通文本的两倍高)可能不适合。

为避免这种不需​​要的行为，您必须使用另一个 span 元素，该元素至少包含比单行(文本)所能容纳的文本更多的文本!
并给这些 span 元素一个 display: inline-block; 解决了这个问题。

关于 Amir5000 回答的一句话:虽然我提出的解决方案也需要一些额外的 span 元素，但它不使用“纯粹的表示标记”，这也可能会产生不需要的空行。

但正如开头所说，使用多列至少非常“棘手”并且很难跨浏览器和/或不同的视口(viewport)宽度获得预测结果。

所以这是我提出的“解决方案”:DEMO