在较小的屏幕上显示文本

Question

我有以下代码::

//Changing text
(function() {
  var quotes = $(".changed");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    var q = quotes.eq(quoteIndex)
      .fadeIn(2300)
    if (quoteIndex < quotes.length - 1)
      q.delay(2300)
      .fadeOut(2300, showNextQuote);
  }
  showNextQuote();
})();

.changed {
  display: none;
  padding: 0;
}

.changed svg {
  width: auto;
  height: 2em;
}

#signature {
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: sign 6.4s ease;
  animation-fill-mode: forwards;
}

@keyframes sign {
  to {
    stroke-dashoffset: 0;
  }
}

#hero h1 {
  margin: 0;
  display: flex;
  font-size: 64px;
  font-weight: 700;
  height: 1em;
  background: url("https://images.unsplash.com/photo-1517315003714-a071486bd9ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YWVzdGhldGljJTIwd2FsbHBhcGVyfGVufDB8fDB8fA%3D%3D&w=1000&q=80") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 320px) {
  #hero>h1:nth-of-type(1) {
    display: inline-block;
    text-align: center;
    margin: auto;
  }
  #hero>h1:nth-of-type(2) {
    display: none;
  }
}

@media (min-width: 1024px) {
  #hero>h1:nth-of-type(1) {
    display: none;
  }
  #hero>h1:nth-of-type(2) {
    display: flex;
    margin: auto;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="hero">
  <h1 style="margin-bottom: 16px">
    Small Screen
  </h1>
  <h1 style="margin-bottom: 16px">Large
    <div class="changed">
      <h1>&nbsp;Screen
      </h1>
    </div>
    <div class="changed">&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563bb" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
  </h1>
</section>

当您运行上述代码时，在新页面中打开它，并检查元素是否为 340 像素左右，您将看到以下输出：

如您所见，Screen 这个词由于某种原因消失了。为什么Screen这个词没有出现在Small这个词的正下方？

预期输出：

我基本上希望这是输出。请忽略文本的居中，我只想显示它。基本上就是这样。谢谢

Answer 1

从带有height: 1em; 的#hero h1 行中删除。

当屏幕变得太窄以至于文本必须换行时，背景图像会尝试仅填充此高度。