javascript - 如何在不使用 span 标签的情况下使一小段文本中的前几个词以斜体和小型大写字母显示？

Question

我有一堆图片，在图片下方的标题中进行了编号，如“图。 1”(图的缩写)，“图。 2”、“图3”等，然后在同一行上进行简短描述。有没有办法使用 CSS 或告诉 Javascript 找到这些字符串(仅限“图 #”)并使用斜体和小型大写字母设置样式？我宁愿这样做，也不愿为每个标签创建一个 span 标签。

body {
    counter-reset: figcaption;
    counter-increment: 1;
    }
figcaption:before {
  counter-increment: figcaption;
  font-variant: small-caps;
  font-style: italic;
  content: "Fig. " counter(figcaption) " ";
}
#gallery {
    width: 360px;  
    height: 3600px;
    float: left;
    background-color: #F8F1D4;
}
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
    }
.imageBlockLeft {
    padding: 10px 0px 10px 20px;
    width: 150px;
    float: left;
    }    
.imageBlockRight {
    padding: 10px 20px 10px 0px;   
    width: 150px;
    float: right;
    }
.imageBlockFloatLeftClearLeft {
    clear: left;
    float: left;
    padding: 10px 0 10px 20px;
    width: 150px;
}
.imageBlockLeft p:nth-child(2n+2) {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    }
.imageBlockRight p:nth-child(2n+2) {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    }
.imageBlockFloatLeftClearLeft p:nth-child(2n+2) {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    counter-increment: figcaption;
    font-variant: small-caps;
    font-style: italic;
    content: "Fig. " counter(figcaption) " ";
    }
.captionFull {
    float: left;
    margin: 0px 10px;
    padding: 0px 20px;   
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    }
.captionFull  p {
    padding: 0px;
    margin: 0px;
    }
p.centerHover {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    line-height: 20px;
    padding: 0 1em 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 16em;
    text-align: center;
    }
h1 {
    font-size: 1.2em;
    font-variant: small-caps;
    text-align: center;
    padding-top: 9px;
    padding-bottom: 11px;
    border-top: 2px solid #E3A300 !important;
    border-bottom: 2px solid #E3A300 !important;
    }
/*THIS AFFECTS THE SPEED OF THE ZOOM*/
.img-zoom {
    width: 150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    }
/*THIS AFFECTS THE SIZE OF THE ZOOM*/
.transition {
    -webkit-transform: scale(4.5); 
    -moz-transform: scale(4.5);
    -o-transform: scale(4.5);
    transform: scale(4.5);
    }

<div id="gallery">
                <h1>Image Gallery</h1>
                <p class="centerHover">Hover over images to enlarge.</p>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_robert_e.jpg" alt="lewis land warrant" width="148" height="195"></p>
                        <figcaption>My great-grandfather, Robert Ewing Lewis, ca. 1908.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_gene.jpg"  width="148" height="184"></p>
                        <figcaption>My grandfather, Eugene Barton Lewis, ca. 1926.</figcaption></div>
                    <div class="imageBlockFloatLeftClearLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_jim.jpg" width="149" height="225"></p>
                        <figcaption>My father, James Edward Lewis, ca. 1959.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_4_generations.jpg"  width="143" height="104"></p>
                        <figcaption>Four generations:  Thompson Price Lewis, Robert Ewing Lewis holding James Edward Lewis, Eugene Barton Lewis, Jan 1939.</figcaption></div>
                    <div class="imageBlockFloatLeftClearLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg"  width="140" height="143"></p>
                        <figcaption>Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_17990212_ky_christian_sur_1197.jpg" class="img-thumbnail" alt="lewis land survey" width="147" height="256"></p> 
                        <figcaption>Alexander Lewis's survey #1197 dated 12 Feb 1799 for warrant #3663.</figcaption></div>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg" class="img-thumbnail" alt="lewis land transfer" width="146" height="256"></p>
                        <figcaption>Alexander Lewis transferred his survey #1197 to Benjamin P Campbell on 1 May 1805.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_&_robt_18020809_ky_christian_war_14849.jpg"  width="143" height="118"></p>
                        <figcaption>Robert Lewis's warrant #725 for 200 acres dated 9 Aug 1802.</figcaption></div>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_&_robt_18051217_ky_christian_war_14849_obv.jpg"  width="143" height="121"></p>
                        <figcaption>Robert Lewis transferred warrant #725 to his father on 17 Dec 1805.</figcaption></div>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_smith_lofland_v_heirs_1.jpg" class="img-thumbnail" alt="lewis land transfer" width="143" height="84"></p></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_smith_lofland_v_heirs_2.jpg" class="img-thumbnail" alt="lewis land transfer" width="142" height="184"></p></div>
                    <div class="captionFull"><figcaption>Smith Lofland's suit against the heirs of Alexander Lewis.</figcaption></div>
            </div>
    </head>
   <script src="jquery.js"></script>  

   <script>

       //THIS IS THE JS FROM THE DEMO

    $(document).ready(function(){
    $('.img-zoom').hover(function() {
        $(this).addClass('transition');

    }, function() {
        $(this).removeClass('transition');
    });
  });

更新

我尝试使用 this solution由 guest271314 提供，效果很好。但现在我有另外三个问题:

1. 除了最后一个字幕，我选择的字体和字体大小不起作用，图 10。我怎样才能让它适用于所有字幕？

2. 另外，我想在“图 #”中的数字后加一个句点。

3. 另外，如何让您的代码和 html 显示在它们自己的框中？

Answer 1

您可以利用 figure , figcaption元素，css counter , counter-increment设置为 1 , :before带有 font-variant 的伪元素设置为 small-caps , font-style设置为 italic , content设置为 "Fig"与 counter串联起来。

body {
  counter-reset: figcaption;
  counter-increment: 1;
}

figcaption:before {
  counter-increment: figcaption;
  font-variant: small-caps;
  font-style: italic;
  content: "Fig. " counter(figcaption) " ";
}

<figure>
  <img src="http://placehold.it/50x50">
  <figcaption>Short description</figcaption>
</figure>
 
<figure>
  <img src="http://placehold.it/50x50">
  <figcaption>Short description</figcaption>
<figure/>

使用 html在问题

body {
  counter-reset: figcaption;
  counter-increment: 1;
}
.imageBlockFloatLeftClearLeft > p:nth-child(2):before {
  counter-increment: figcaption;
  font-variant: small-caps;
  font-style: italic;
  font-size: .8em;
  line-height: 18px;
  content: "Fig. " counter(figcaption) ". ";
}

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

您还可以包含一个 newline 以下"Fig. 1."文本在 <p>元素，使用 css white-space设置为 pre-line , :first-line伪元素将样式应用于所选 p 的第一行元素。

.imageBlockFloatLeftClearLeft > p:nth-child(2) {
  white-space: pre-line;
}

.imageBlockFloatLeftClearLeft > p:nth-child(2):first-line {
  font-variant: small-caps;
  font-style: italic;
}

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Fig. 1.
    Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Fig. 2.
    Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>