[英]CSS :first-letter not working
Need to show first letter bigger than other letters. 需要显示比其他字母大的第一个字母。
Fiddle: https://jsfiddle.net/mc165upk/1/ 小提琴: https : //jsfiddle.net/mc165upk/1/
But background should be shown with line height. 但是背景应该以行高显示。
css: 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; }
According to the docs , :first-letter
will only work for block-level elements. 根据文档 , :first-letter
仅适用于块级元素。 Since you explicitly set your paragraph to be display: inline;
由于您明确设置了要display: inline;
的段落display: inline;
, :first-letter
will not work. , :first-letter
将不起作用。 You can fix it by setting display: block;
您可以通过设置display: block;
来修复它display: block;
or display: inline-block;
或display: inline-block;
. 。
There was another error in your fiddle in that .t1-result-topheading
was not a parent class in the HTML for that paragraph, so the style wouldn't be applied anyway. 在您的小提琴中还有另一个错误,即.t1-result-topheading
不是该段落在HTML中的父类,因此无论如何都不会应用该样式。
Edit: Since you want to maintain spaces between the lines, you can accomplish this by wrapping your text in a span
(inline by default), applying the background color to the span, and using :first-letter
on the paragraph (which will be block-level by default). 编辑:由于要在行之间保持空格,因此可以通过以下方式完成此操作:将文本包裹在一个span
内(默认情况下为内联),将背景色应用于范围,然后在段落上使用:first-letter
默认情况下为块级)。
.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; }
<div class="main-heading"> <p><span>How much should you pay for a video campaign?</span></p> </div>
The :first-letter as defined in the spec http://www.w3.org/TR/CSS2/selector.html#first-letter only applies to a block level element. 规范http://www.w3.org/TR/CSS2/selector.html#first-letter中定义的:first-letter仅适用于块级元素。 So if you want to use ::first-letter selector you have to make the element display:inline-block;
因此,如果要使用:: first-letter选择器,则必须使元素display:inline-block;
. 。
Also there was error in your css .t1-result-topheading p:first-letter { font-size: 108px; }
您的css .t1-result-topheading p:first-letter { font-size: 108px; }
.t1-result-topheading p:first-letter { font-size: 108px; }
was not available in your html code , so fixed that as well. .t1-result-topheading p:first-letter { font-size: 108px; }
在您的html代码中不可用,因此也进行了修复。
Working snippet: 工作片段:
.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>
EDIT 编辑
The Jquery solution if you want to use display:inline only. 如果您只想使用display:inline,则使用Jquery解决方案。
$('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>
The "parent" element of this: .t1-result-topheading p:first-letter { ... }
points to a non-existing element (as what is written on your code, on your fiddle). 其中的“父”元素: .t1-result-topheading p:first-letter { ... }
指向一个不存在的元素(如代码中的小提琴一样)。 There is no such element as .t1-result-topheading
, and therefore will not apply the CSS rule. 没有.t1-result-topheading
这样的元素,因此不会应用CSS规则。
Use display: inline-block
as this will let the element have a width
and a height
. 使用display: inline-block
因为这将使元素具有width
和height
。
As what w3schools have said: 正如w3schools所说:
inline-block elements are like inline elements but they can have a width and a height. 内联块元素类似于内联元素,但是它们可以具有宽度和高度。
Therefore, your code should be: 因此,您的代码应为:
.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; }
<div class="main-heading"> <p>How much should you pay for a video campaign?</p> </div>
Update css code below 更新下面的CSS代码
.main-heading p {
display: inline-block;
}
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
使用此链接了解first-letter
[ https://www.w3schools.com/cssref/sel_firstletter.asp][1]
.t1-result-topheading p::first-letter { font-size: 108px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.