html - 使跨度在溢出时充当输入字段

Question

我在直接放置在输入字段顶部的跨度中复制我的输入字段值。 (这样做只是为了操纵部分文本)

我遇到了溢出问题。

目前，如果我继续输入超过输入字段的限制，跨度将无限扩大。

有没有办法让 span 像输入字段一样，随着越来越多的字符被添加到左边来滚动文本？

当前跨度样式:

style="display: inline-block; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;"

编辑

<div style="position: relative;" class="input-box">
                    <input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="street
                     input-text"/>

                    <span id="street1span" class="input-text" style="display: inline-block; width: 100%; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;" ></span>
                </div>

Answer 1

试试这个:

span {
    border: 1px solid #CCC;
    width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

input[type="text"] {
    width: 200px;
}

Span :<span contenteditable="true"></span>
<br><br>
Input:<input type="text" name="">

编辑帖子后:

span {
    position: absolute;
    top: 100px;
    left: 2px;
    padding: 1px;
    z-index: 2; 
    border: 1px solid #CCC;
    width: 200px;
    height: 20px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

<div style="position: relative;" class="input-box">
    <input style="color: #000; caret-color: black; z-index: 1;" type="text" name="street[]" id="street_1" class="streetinput-text"/>

<span id="street1span" contenteditable="true" class="input-text" >
    </span>
</div>