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

标签 javascript html css

我有一堆图片，在图片下方的标题中进行了编号，如“图。 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 显示在它们自己的框中？

最佳答案

您可以利用 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>

关于javascript - 如何在不使用 span 标签的情况下使一小段文本中的前几个词以斜体和小型大写字母显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41405551/

上一篇：javascript - 在 D3.JS 桑基图中突出显示特定链接

下一篇：javascript - HTML/JavaScript - 输入值不更新(Element.value = Null)

相关文章：

javascript - 与 RTL 语言一起使用时字符串替换函数调用的顺序

javascript - 使用鼠标拖动在 HTML Canvas 内移动图像

html - HTML 文档风格指南强烈建议在 <code>...</code> 中使用空格

html - 响应表隐藏没有值的列

javascript - 鼠标移动时显示/隐藏 div

javascript - 如何使条件仅选择元素 true - Javascript

javascript - 在 KnockoutJS 中将数据传递给可观察对象时出现问题

javascript - 如何从对象数组中获取属性？

html - 如何使用 Handlebars 在一条路线上提交多个表单

html - 不使用 flex 居中 div

©2024 IT工具网  联系我们