Question

我不确定单独使用CSS是否可行，但我正在尝试创建一个内联textarea元素，其中文本是可选的但仍然看起来像句子的一部分。通过以下方式知道字符数（cols =“11”）时，它看起来很好。

<p>To run nload for your device run <textarea readonly cols="11">nload p3p1</textarea> in your terminal.</p>

和CSS：

textarea {
    display: inline;
    border:none;
    resize: none;
}

有没有办法动态执行此操作，而无需为CSS中的每个textarea指定列？所以每个textarea都是内联的，并且看起来不引人注目地成为正常段落的一部分但是可以选择吗？如果没有CSS解决方案，是否有（纯）JavaScript解决方案？

Answer 1

您需要渲染输入文本并根据渲染计算输入提交文本的宽度。

可能的解决方法是将文本复制到隐藏的范围内并检查其宽度，如图所示：

jQuery('input').on('input', function()
{
    var $this = jQuery(this);

    // Create a widthSpan if we haven't already.
    document.$widthSpan = document.$widthSpan || jQuery('<span style="display: none" />').appendTo(document.body);

    document.$widthSpan.text($this.val());
    $this.css('width', document.$widthSpan.width() + 5);
}).trigger('input');

工作小提琴：http://jsfiddle.net/687uew37/。

请注意，这是一个更改输入内容后立即更新的示例。根据具体实施和使用情况，您可能需要相应地实施更改。

Answer 2

您可以使用JavaScript根据textarea中的字符数动态设置textarea的宽度。

<强> HTML：

<p>To run load for your device run <textarea class="tx" readonly>nload p3p1</textarea> in your terminal.</p>

<p>Here is another example which follows the same pattern <textarea class="tx" readonly>your textarea query you can add lots of text. </textarea>You can add a lot of other stuff after it and it will still look like part of your text.</p>

<强> CSS：

p{
line-height:1.5em;
font-size:14px;
}

textarea {
    margin-bottom:-0.3em;
    border:none;
    overflow:hidden;
    height:14px;
    display:inline;
    white-space: nowrap;
}

<强> Jquery的：

$(document).ready(function(){
    $('textarea').each(function(){
        //Width of a character:
        var chars = 8;
        //Find out how many characters are in the text area:
        var txLength = $(this).val().length;
        //Calculate the width:
        var txWidth = chars * txLength;
        //Set the width:
        $(this).css({'width':txWidth,'resize':'none'});
    });
});

首先，每个textarea一个。我们的想法是您已经预定义了font-family，并且您知道font-family中字符的平均宽度。你可以在网上找到你的font-family平均字符宽度，或者你可以估计你是否不知道它（我在这里猜测了）。

在这种情况下，变量chars保存字符的平均宽度值。然后，通过将字符数乘以平均字符宽度计算所需的textarea宽度，并使用jQuery的.css()函数将其插入CSS中。

在这里工作小提琴：http://jsfiddle.net/ys2Lfrt8/5/

缺点：没有响应但可以使用@media-queries

修复

HTML / CSS内联textarea将宽度设置为与输入相同

2 个答案: