Question

我正在处理关于摄影的网站项目，出于某种原因，我希望我的文本有一个首字母大写字母（法语为lettrine）。

我的代码是这个，它工作正常

p:first-child:first-letter 
{
    float:left;
    margin: 3px 3px 0 0;
    padding: 0 5px 0 0;
    line-height: 25px;  
    font-size: 50px;    
    color: rgb(255, 122, 0); 

}

问题是我在这个大写字母下面有一个很大的空间（25像素）和第一个＆＃34;常规线＆＃34;因为据我所知，line-height同时适用于此信的top和bottom。有没有办法正确控制这个高度？

我发现了一些涉及同一个王者的线程，但似乎我必须进入负边缘而且我不知道它是否是一个＆＃34;清洁＆＃34;解。我应该查看vertical-align吗？

非常感谢你，到目前为止你已经读过我了！

这是一张真正理解的图片 my problem

Answer 1

试试这个......

我发现除了::first-letter CSS属性之外，还有一个CSS属性支持dropcap文本。

或者您仍然可以使用其他浏览器更支持的标准CSS ::first-letter。

p {
  font-family: sans-serif;
  font-weight: 300;
  line-height: 1.3449;
  margin: 0 0 30px;
}

p.test-initial::first-letter {
  font-size: 32px;
  font-weight: bold;
  color: orange;
  margin-right: 5px;
  
  -webkit-initial-letter: 4;
          initial-letter: 4;
}

p.test-dropcap::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 45px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 0;
}

<p class="test-initial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat, urna vel aliquam facilisis, nisi augue dapibus arcu, faucibus fringilla arcu sapien nec sapien. Sed ac enim ac ligula rhoncus elementum. Curabitur id sem facilisis, semper est eget, posuere sem. Curabitur elementum dolor sed tortor malesuada, eu tempor nisi varius. Etiam lobortis, neque quis efficitur iaculis, nisi nibh rutrum sapien, non tempus dolor odio nec erat.</p>

<p class="test-dropcap"> Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pellentesque pulvinar diam. Sed a efficitur ipsum, eu bibendum mauris. Curabitur suscipit nisi eget lacus imperdiet gravida. Aenean orci orci, sodales eget imperdiet id, ullamcorper in ante. Vivamus malesuada hendrerit iaculis. Etiam dignissim lacus turpis, vitae placerat tortor rhoncus at. Fusce porta nec tellus eget suscipit. Aenean pharetra justo mauris, non pretium nisi sollicitudin tempus.</p>

下降初始/大写字母的底线高度

1 个答案: