Javascript 如何使文本框增长到其父div的宽度

JQUERY

我需要文本框扩展到父div宽度的末尾。一旦文本的值溢出父级的宽度。它应该分解到下一行。我所做的一切就像输入标签一样，它帮助存储输入值并存储在li中。提前谢谢

---

这里我给出了文本框全宽的解决方案。我不确定名单的细目

$(".mail-input").keyup(function (e) {
        var value = $(".mail-input").val();

        if (e.keyCode == 13) {

            if (value.length == 0) {
                return false;
            } else {
                $('.multi-input li.temp-value').before('<li class="temp-li">' + value + '<span class="close-btn">x</span></li>');
                $('.mail-input').val('').focus();
            }
        } else if (e.keyCode == 8) {

            if (value.length == 0) {
                $('.multi-input li:last-child').prev().remove();
            } else {
                return false;
            }
        }
    });
$('.btn-cancel').click(function () {
    $('.auto-gen li').remove();
    $('.multi-input li').not('li:last').remove();
    $('.mail-input').val('').focus();
});
$('body').on('click', '.close-btn', function () {
    $(this).parent().remove();
});

---

您所说的文本框是指输入对吗？如果是这样，则无法在类型为text的输入中断开行，如果你想断线，你应该更好地使用它，让它工作正常，但是我需要文本框增长到父div的末尾，并分解文本，而在这里它会增长，保持一定的宽度，我不知道ma代码有什么问题。我不想分解文本框，实际上我需要分解保存文本框的列表为此写了一个插件，也许你可以从中得到一些想法。这里有一个演示：使用宽度：100%；对于文本框，您可以在输入标记后检查演示。输入将分解到下一行我不希望它是那样的。哪个标签？你能给包括标签的小提琴链接吗？键入一些文本，然后在文本框中按enter键。它将具有您输入的标签。然后开始输入下一个文本，它将从下一行开始，我不需要它。我需要在第一个标记之后的下一个开始，并继续到父div的宽度

$(".mail-input").keyup(function (e) {
        var value = $(".mail-input").val();

        if (e.keyCode == 13) {

            if (value.length == 0) {
                return false;
            } else {
                $('.multi-input li.temp-value').before('<li class="temp-li">' + value + '<span class="close-btn">x</span></li>');
                $('.mail-input').val('').focus();
            }
        } else if (e.keyCode == 8) {

            if (value.length == 0) {
                $('.multi-input li:last-child').prev().remove();
            } else {
                return false;
            }
        }
    });
$('.btn-cancel').click(function () {
    $('.auto-gen li').remove();
    $('.multi-input li').not('li:last').remove();
    $('.mail-input').val('').focus();
});
$('body').on('click', '.close-btn', function () {
    $(this).parent().remove();
});

.temp-value
{
width: auto;
min-width: 90px;
max-width: 100%;
height: 26px;
width: 100%;
float: left;
display: inline-block;
}
.mail-input
{
outline:none !important;
border: none;
text-align: left;
padding-left: 4px;
padding-top:2px;
resize:none;
background: none;
width:100%;
box-sizing:border-box;
}