如何在文本更改时插入保持固定的文本下划线？答案

【问题标题】：How can I insert a text underline that stays fixed while the text changes?如何在文本更改时插入保持固定的文本下划线？
【发布时间】：2021-05-31 17:33:24
【问题描述】：

我正在尝试创建一个文本更改动画，其中四个单词在固定的下划线空间中循环。我已经使用一个简单的 js 脚本完成了文本更改部分，但我无法定位下划线。我尝试使用 hr 无济于事，并且我已经使用内联 svg 接近了，但是我不知道如何定位 SVG 以使其位于文本下方。我尝试使用 SVG id 调整 CSS 中的位置，也尝试直接在 svg 代码中调整 SVG 的位置。

var text = ["Repurposed", "Remnant  ", "Scrap", "Upcycled  "];
var counter = 0;
var elem = $("#greeting");
setInterval(change, 3000);
function change() {
    elem.fadeOut(function(){
        elem.html(text[counter]);
        counter++;
        if(counter >= text.length) { counter = 0; }
        elem.fadeIn();
    });
}

#layer_1 {
    display: block;
    padding-bottom: 20%;
    padding-top: 0;
    text-align: right;
    margin-left: 40%;
    margin-top: 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-6">
        <div class="text-change" id='greeting'>Upcycled</div>
        <div class="liner">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.52 4.84"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px; padding-left: 25%;}</style></defs><line class="cls-1" y1="2.84" x2="200.51" y2="2"/></svg>
</div>
    </div>
    <div class="col-6">
        <div class="text-change-right">Materials</div>
    </div>
</div>

【问题讨论】：

是否为该元素赋予样式 text-decoration: underline; 不适合您？
否，因为我希望下划线在文本更改时保持固定。
用更具体的术语定义“保持固定”。用额外的空格填充字符串长度会有所帮助吗？在演示中不清楚 svg 在做什么
嗯，是的，也许填充字符串长度会有所帮助。保持固定是指我只想要一条实线，文本在其上发生变化，以便填充空白类型的效果。
您可以将文本放在<div> 中，样式为display: inline-block，给它一个固定的宽度，使文本居中（如果需要），然后给<div> 一个底部边框。

标签： javascript html css svg

【解决方案1】：

可能不是你想要的......但是当我看到 jQuery 时，我会尝试在没有的情况下编写一些东西

var titles = ["Repurposed", "Remnant", "Scrap", "Upcycled"];
var div = document.querySelector(".greeting div:first-child");
setInterval(change, 200);

function change() {
  titles.unshift(div.innerHTML = titles.pop());// pop last title, insert at front
}

.greeting {
  width: 50vw;
  font:30px Arial;
}

.greeting div {
  background: pink;
  text-align: center;
}

.greeting div:first-child {
  border-bottom: 1px solid green;
}

<div class="greeting">
  <div>Upcycled</div>
  <div>Materials</div>
</div>

【讨论】：

感谢您写下这篇文章，这不是我想要的，但看到它以不同的方式完成是有帮助的。

【解决方案2】：

这是一个使用实下划线的方法。

通过使用::after 伪元素来扩展下划线，在文本后添加不间断的空格。为了使下划线看起来是固定宽度的，我们关闭了文本换行，并确保使用 overflow: hidden 隐藏任何多余的空格。

您只需确保包含足够的\0000a0（不间断空格）字符，以确保文本溢出列。如果这看起来有点难看，您也许可以尝试水平拉伸空间，而不是使用this question 中的一种技术。

var text = ["Repurposed", "Remnant  ", "Scrap", "Upcycled  "];
var counter = 0;
var elem = $("#greeting");
setInterval(change, 3000);
function change() {
    elem.fadeOut(function(){
        elem.html(text[counter]);
        counter++;
        if(counter >= text.length) { counter = 0; }
        elem.fadeIn();
    });
}

body {
  font-size: 36px;
}

.row {
  display: flex;
}
.col-6 {
  width: 300px;
}


.text-change-container {
  overflow: hidden;
}

.text-change {
  display: inline;
  text-decoration: underline;
  white-space: nowrap;
}

.text-change::after {
  display: inline;
  content: '\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0\0000a0';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-6 text-change-container">
        <div class="text-change" id='greeting'>Upcycled</div>
    </div>
    <div class="col-6">
        <div class="text-change-right">Materials</div>
    </div>
</div>

【讨论】：