我有一個文檔，它使用A，P和SPAN以及drop類來表示首字下沉。當我把文字直接放在段落中時，它可以正常工作。但是，如果段落以一個錨點或一個P類的跨度開始，就會出現多余的空格。如果我不同意結案陳詞& gt通過下面的文本，一些多余的空間消失了，但不是全部。如果可能的話，我希望保留標記的縮進，避免將每一節的首字母放在單獨的元素中。
class=drop中的A或SPAN是必需的，因為否則第一個字母將無法識別。
<!DOCTYPE HTML>
<html lang=en>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<TITLE>favorite things</TITLE>
<META name="KEYWORDS" CONTENT="filk">
<style>
p {
left:20%;
position:relative;
right:-20%;
margin-left:2em;
width:60%;
}
p.drop {
margin-left:2em;
}
p.drop::first-letter
{
font-size:2em;
margin-left:-2em;
}
a.drop::first-letter,
span.drop::first-letter
{
font-size:2em;
}
a.L,div.L,span.L,a.R,div.R,span.R {
display:inline;
--width:14%;
width:var(--width);
position:absolute;
container-type: inline-size;
}
a.L,div.L,span.L {
left:-20%;
}
a.R,div.R,span.R {
right:0;
}
h1 {
text-align:center;
font-size:4em;
}
img.V {
display:block;
height:auto;
width:100%;
margin-top: 10%;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 20em;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 102%;
left: calc(-10em + 50%);
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.L .tooltiptext {
left: 0;
text-align: left;
}
.R .tooltiptext {
left: auto;
right: 0%;
text-align: left;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
width: 1px;
}
.L .tooltiptext::after {
left: 20cqw;
}
.R .tooltiptext::after {
left: auto;
right: 20cqw;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.verse {
font-size: 2em;
text-align: center;
width:60%
}
</style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>
<p>
[Verse 1]
</p>
<p class="drop verse">
Gardening
<a class=tooltip >
spiders
<span class=tooltiptext>
Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
</span>
</a>
<br>
And swords that are broken
<br>
Words in the Black Speech
<br>
That must not be spoken
<br>
Unfaithful stewards
<br>
Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse 2]
</p>
<p class="drop verse">
<span class="drop tooltip">
Peddlers
<span class=tooltiptext>
a zone agent of the <q>Confederacy of Vega</q> in the story <q>Agent of Vega</q>
</span>
</span>
who drive their
Mysterious wagons
<br>
Petite young ladies
<br>
Who can speak to dragons
<br>
Travelling the Cosmos
<br>
In a
<a class=tooltip >
ship who sings
<span class=tooltiptext>
Helva is an intelligent girl born with a severely disabled body.
Her society trains people with such disabilities to operate machinery
via a direct brain link. In Helva's case, she is trained to
operate a spaceship (<q>brain ship</q>), and became known as
<q>The Ship Who Sings</q> due to her habit of singing to herself.
</span>
</a>
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse 3]
</p>
<p class="drop verse">
<span class="drop tooltip">
Time traveling bar men
<span class=tooltiptext>
<q>‘—All You Zombies—’</q> from The Magazine of Fantasy & Science Fiction, March 1959
</span>
</span>
<br>
<span class=tooltip>
Who are like no others
<span class=tooltiptext>
The protagonist of <q>‘—All You Zombies—’</q> is
a bartender who, with the aid of a time machine and a sex change
operation, is his own father and own mother.
</span>
</span>
<br>
Who are their own fathers
<br>
And are their own mothers
<br>
Of all such stories
<br>
Know Heinlein's are kings
<br>
These are a few of
<br>
My favorite things.
</p>
<p>
[Verse 7]
</p>
<p class="drop verse">
<a class="drop tooltip" >
Calvin
<span class=tooltiptext>
In Henry Beam Piper's novel <q>Lord Kalvan of Othewhen</q>, Calvin
Morrison is a Keystone cop who is accidentally taken into and
stranded in an alternate universe by a paratime transporter: he
later learns that the region is called the princedom of Hostigos.
The locals later have trouble with his American name and refer to
him as Lord Kalvan.
</span>
</a>
who knows his
<br>
Military history
<br>
Runs afoul of the great
<br>
Paratime mystery
<br>
The hand of a lovely
<br>
Young princess it brings
<br>
These are a few of
<br>
My favorite things.
</p>
</BODY>
</HTML>當你發布一個最小的可重復的例子時，最佳的詞是:最小。下面的例子完全不同于OP -兩個段落-帶首字下沉，并作為額外的工具提示鏈接。關于首字下沉的詳細信息，請參見圖一。
圖一 超文本標記語言
<!-- Place a <b> as the first thing within the <p> -->
<p><b data-dc="A"></b>pple</p>
<!-- Remove the first letter within the <p> and assign it to [data-dc]
attribute of <b> -->半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
/*
Set all <p> to a minimum height -- it should be a little over the height of
the drop cap. In this example the min-height is 7ex which is 7 "x" stacked
on top of each other (about a little over 3 lines of text).
*/
p {
min-height: 7ex;
}
/* This targets all <b data-dc=""> */
[data-dc] {
/*
Always apply this to inline elements such as <span>, <a>, <b>, <i>, etc
Tag will still sit inline and height, width, margins, etc will apply to it.
*/
display: inline-block;
/* This allows the text to wrap around it */
float: left;
/* Pattern for shorthand is: top, right, bottom, and left */
padding: 0 2px 0 0;
/*
font-size: 500% is the height of 3 lines
line-height of <p> is 1.25 (see :root in CSS of Example)
line-height: 0.75 allows the drop cap to lower itself from the center of
the line.
font-family: "Floral Capitals" was loaded by (see @import in CSS of Example)
*/
font: 500%/0.75 "Floral Capitals";
}
/*
This creates a pseudo-element that contains whatever is assign to the [data-dc]
attribute.
*/
[data-dc]::before {
content: attr(data-dc);
}例子
@import url("https://fonts.cdnfonts.com/css/argos-george");
@import url("https://fonts.cdnfonts.com/css/floral-capitals");
:root {
font: 2.25ch/1.25 "Argos George";
}
p {
min-height: 7ex;
}
[data-dc] {
display: inline-block;
float: left;
padding: 0 2px 0 0;
font: 500%/0.75 "Floral Capitals";
}
[data-dc]::before {
content: attr(data-dc);
}
.ref {
display: inline-block;
position: relative;
color: #930;
text-decoration: dashed underline #930 2px;
cursor: pointer;
}
.ref a {
display: inline-block;
position: absolute;
left: 0;
z-index: 1;
width: 20vw;
padding: 5px;
border: 5px solid transparent;
border-radius: 6px;
font-size: 0.85rem;
opacity: 0.0;
color: #930;
text-decoration: none;
background: cornsilk;
transition: 0.7s ease;
pointer-events: none;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.ref:hover a,
.ref:focus a,
.ref a:hover {
opacity: 1.0;
pointer-events: auto;
}
.ref a:hover {
color: #bad;
text-decoration: underline dotted #bad 2px;
background: #930;
}
.up {
bottom: 100%;
}
.down {
top: 100%;
}<p><b data-dc="A"></b> cold voice answered: 'Come not between the <i class="ref">Nazg?l<a class="down">A word from the Black Speech, usually translated 'Ringwraith'...</a></i> and his prey! Or he will not slay thee in thy turn. He will bear thee away to the houses of lamentation, beyond all darkness, where thy flesh shall be devoured, and thy shrivelled mind be left naked to the Lidless Eye.</p>
<p><b data-dc="H"></b>ere was one with an air of high nobility such as Aragorn at times revealed, less high perhaps, yet also less incalculable and remote: one of the Kings of Men born into a later time, but touched with the wisdom and sadness of the <i class="ref">Eldar Race.<a class="up">The name given to the Elves by the Vala Orom?...</a></i> He knew now why Beregond spoke his name with love. He was a captain that men would follow, that he would follow, even under the shadow of the black wings.</p>