Question

我有这个简单的代码：

<input type="text" value="Some Extremely Really Long Word" />

如何确保值（在这种情况下为“某些特别长的单词”）完全显示（即未剪裁）。

我尝试应用样式：overflow：visible和display：nowrap但它不起作用。

我不想应用像：width：200px这样的样式，因为我不知道这些字会有多长。

小提琴：http://jsfiddle.net/TfKbp/3/

Answer 1

我过去曾使用它来动态地将文本INPUT的宽度扩展到其内容的宽度。基本上，您使用完全相同的字体系列，字体大小等创建SPAN并使用keypress事件添加字符，测量其大小，并调整INPUT的大小。< / p>

编辑1

要动态调整文本框的初始值，只需要更多代码...

<强> HTML

<input id="txtLong" type="text" value="What does the fox say? Ring-ding-ding-ding-dingeringeding! Gering-ding-ding-ding-dingeringeding! Gering-ding-ding-ding-dingeringeding! What the fox say?" />
<span id="spanLong" style="display: none;"></span>

<强>的JavaScript

var txtLong = $("#txtLong");
var spanLong = $("#spanLong");

spanLong.text(txtLong.val());
txtLong.css("width", spanLong.width());

txtLong.keypress(function(e){
    if (e.which !== 0 && e.charCode !== 0) {
        var char = String.fromCharCode(e.keyCode | e.charCode);
        spanLong.text(txtLong.val() + char);
        txtLong.css("width", spanLong.width());
    }
});

<强> CSS

input, span {
    padding: 2px 3px;
    font-size: 11px;
    font-family: Sans-serif;
    white-space: pre;
}

<强> New and Improved Fiddle

编辑2

由于您正在寻找通过点击选择文字的方法，我想我也会指出您不一定需要INPUT来做到这一点。查看 this JSFiddle 。作为额外的奖励，它不使用JQuery。我知道你有点反对。

编辑3

通过调整this blog post，我找到了一种简单地使用普通JavaScript将文本框的大小调整为其初始值宽度的方法。

<强> HTML

<input type="text" id="txtLong" value="Some very long text that all needs to show"/>
<span id="ruler"></span>

<强>的JavaScript

String.prototype.visualLength = function()
{
    var ruler = document.getElementById("ruler");
    ruler.innerHTML = this;
    return ruler.offsetWidth;
}

window.onload = function() {
    var txtLong = document.getElementById("txtLong");
    var width = txtLong.value.visualLength();
    txtLong.setAttribute("style", "width:" + width + "px");
}

<强> CSS

#ruler {
    visibility: hidden;
    white-space: nowrap;
}

#txtLong, #ruler {
    font-family: sans-serif;
    font-size: 11pt;
}

<强> JSFiddle

Answer 2

没有声明方式（我知道）这样做，但使用jQuery相当容易。您基本上需要做的是创建包含与input相同样式的第二个元素（不是input）。然后测量第二个元素的宽度，并将input的宽度设置为新的宽度。

这是你如何做到的：

HTML：

<input type='text' value='Some Extremely Really Long Word' id='my-input' />

jQuery的：

$(document).ready(function() {\

    var $input = $('#my-input'),
        $clone = $('<div></div>');

    $clone.html($input.val());
    $clone.css({
        whiteSpace: 'nowrap',
        font: $input.css('font'),
        paddingLeft: $input.css('padding-left'),
        paddingRight: $input.css('padding-right')
    });
    $clone.appendTo($('body'));
    $input.css({
        width: $clone.width();
    });
    $clone.remove();

})

没有在输入框中包装'value'？

2 个答案: