css 如何在嵌套容器中放置大写字母后删除多余的空间

wn9m85ua  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(118)

我有一个文件，使用A，P和SPAN与类下降下降的下降资本。当我在一个段落中直接有文本时，它正常工作。但是，如果段落以锚或P类跨度开始，则会出现多余的空格。如果我用下面的文本邻接结束>，一些无关的空间消失了，但不是全部。如果可能的话，我希望保留标记的缩进，避免将每节经文的首字母放在单独的元素中。
A或SPAN中的class=drop是必需的，因为否则第一个字母将无法识别。

<!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 href="https://en.wikipedia.org/wiki/Ungoliant">
   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 href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">
  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&apos;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>&lsquo;&mdash;All You Zombies&mdash;&rsquo;</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>&lsquo;&mdash;All You Zombies&mdash;&rsquo;</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&apos;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" href="https://en.wikipedia.org/wiki/Kalvan_(Calvin_Morrison)">
  Calvin
  <span class=tooltiptext>
    In Henry Beam Piper&apos;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>
css

1条答案

按热度按时间
dgtucam1

dgtucam11#

最佳的词是：*minimal*当您发布minimal reproducible example时。下面的例子与OP完全不同--两个段落--带有下拉式大写字母，并作为额外的工具提示链接。下拉盖的详细信息见图I。

图一

HTML

<!-- 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> -->

CSS

/*
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 href="https://www.glyphweb.com/arda/n/nazgul.html" 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 href="https://www.glyphweb.com/arda/e/eldar.php" 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>
赞(0）分享  回复(0）举报  2023-06-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com