Question

需要显示比其他字母更大的第一个字母。

但是应该用行高显示背景。

css：

.main-heading p {
    padding: 0px 10px;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 91px;
    background: #faf98e;
    font-size:72px;
}
.t1-result-topheading p:first-letter { font-size: 108px; }

Answer 1

根据docs，:first-letter仅适用于块级元素。由于您明确将段落设置为display: inline;，因此:first-letter将无效。您可以通过设置display: block;或display: inline-block;来修复此问题。

你的小提琴中还有一个错误，.t1-result-topheading不是该段落的HTML中的父类，因此无论如何都不会应用该样式。

修改：由于您希望在行之间保留空格，因此可以通过将文本包装在span（默认为内联）中，将背景颜色应用于范围来实现此目的，并在段落上使用:first-letter（默认情况下将是块级别）。

＆＃13;

.main-heading span {
  padding: 0px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 91px;
  background: #faf98e;
  font-size: 72px;
}

p:first-letter {
  font-size: 108px;
}

＆＃13;

<div class="main-heading">
  <p><span>How much should you pay for a video campaign?</span></p>
</div>

＆＃13;

Answer 2

规范http://www.w3.org/TR/CSS2/selector.html#first-letter中定义的第一个字母仅适用于块级元素。因此，如果你想使用:: first-letter selector，你必须创建元素display:inline-block;。

您的CSS .t1-result-topheading p:first-letter { font-size: 108px; }中也出现错误，您的html代码中没有该错误，因此也已修复。

工作片段：

.main-heading p {
  padding: 0px 10px;
  display: inline-block;;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 91px;
  background: #faf98e;
  font-size: 72px;
}

.main-heading p::first-letter{ color:red;}

<div class="main-heading">
  <p>How much should you pay for a video campaign?</p>
</div>

修改

Jquery解决方案，如果您想使用display：仅内联。

$('p').html(function (i, html) { return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="First--letter">$1</span>'); });

.main-heading p { padding: 0px 10px; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 91px; background: #faf98e; font-size: 72px; } .First--letter{ color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-heading"> <p>How much should you pay for a video campaign?</p> </div>

Answer 3

＆＃34;父母＆＃34;元素：.t1-result-topheading p:first-letter { ... }指向一个不存在的元素（就像你的代码上写的那样，在你的小提琴上）。没有.t1-result-topheading这样的元素，因此不会应用CSS规则。
使用display: inline-block，因为这会让元素有width和height。

正如w3schools所说：

内联块元素就像内联元素，但它们可以有宽度和高度。

因此，您的代码应为：

＆＃13;

.main-heading p {
    padding: 0px 10px;
    display: inline-block;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 91px;
    background: #faf98e;
    font-size:72px;
}
.main-heading p::first-letter { font-size: 108px; }

＆＃13;

<div class="main-heading">
<p>How much should you pay for a video campaign?</p>
</div>

＆＃13;

Answer 4

更新下面的css代码

.main-heading p {
  display: inline-block;
}

Answer 5

使用此链接了解first-letter [https://www.w3schools.com/cssref/sel_firstletter.asp][1]

.t1-result-topheading p::first-letter { font-size: 108px; }

CSS：第一封信不起作用

5 个答案: