CSS-属性首字母缩写在任何浏览器中均不起作用

我希望我的段落的第一个字母大于其余的字母,以使其占据该段落中三行的高度。我试图在我的CSS代码中使用“首字母缩写”,但它不适用于任何浏览器:Internet Explorer,Firefox,Chrome或Safari。

我知道已经问过这个问题,而且我知道解决方案是对“第一个字母”使用属性“ float:left”。在我可以应用属性“ margin”并准备好之后。

但是我不能相信属性“ initial-letter”不能正常工作。我的代码很简单:

<!DOCTYPE html>
<html>
<head>
<style>
section{background-color:blue;
width:600px;
margin:auto;}

p::first-letter{
initial-letter:3;}

p{color:white;}

</style>
</head>
<body>
<header>
<h1>Entendiendo la propiedad "first-letter" de CSS</h1>
</header>
<section>
<p>Este texto esta pensado para ver el pseudoelemento ::first-letter que permite en CSS
modificar las caracteristicas de la primera letra de un parrafo (normalmente se modifica 
                el tamano).</p> 
</section>
</body>

谢谢

评论
十梦九你
十梦九你

You could float: left a ::first-letter pseudo

p.first-letter::first-letter {
  float:left;
  padding: 0 10px 0 0;
  color: red;
  font-size: 3em;
  margin-bottom: -0.1em;
}
<p class="first-letter">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Este texto esta pensado para ver el pseudoelemento ::first-letter que permite en CSS modificar las caracteristicas de la primera letra de un parrafo (normalmente se modifica el tamano).</p>

Initial letter is only supported in Safari

点赞
评论