CSS初始字母变通办法

debugcn 发表于 Dev

戴夫

我正在尝试以较大的尺寸实现CSS初始字母，并在其周围插入文本，如本示例CSS Tricks所示。例如

.subhead {
    initial-letter: 4;
}

但是它仅受Safari支持，其他浏览器未实现。但是CSS-Tricks页面有这个-

.drop-cap::first-letter {
  -webkit-initial-letter: 4;
  initial-letter: 4;
  color: orange;
  font-weight: bold;
  margin-right: .75em;
}

在Chrome中查看该示例显然不起作用，那么为什么要使用-webkit-initial-letter？

它是我真的想在特定页面上实现的功能，我可以实现在所有浏览器上都能使用的替代方法吗？我特别希望第一个字母下降，而后续各行环绕，而不仅仅是首字母大字体向上。

谢谢。

陪同Afif

使用float可以实现以下目的：

p {
 line-height:1.2;
}
p::first-letter {
 float:left;
 font-size:400%;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in bibendum libero. Fusce feugiat facilisis mi, dapibus porta enim ornare in. Morbi dapibus interdum suscipit. Aenean fermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpat tristique.
</p>

如果您不想调整字体大小，可以使用margin进行控制：

p {
 line-height:1.2em;
}
p::first-letter {
 float:left;
 line-height:0;
 margin:calc(2*1.1em) 10px;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in bibendum libero. Fusce feugiat facilisis mi, dapibus porta enim ornare in. Morbi dapibus interdum suscipit. Aenean fermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpat tristique.
</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。