控制html5输入字段中的文本溢出

I have an HTML5 input field that displays a clear button with an "x" in it in webkit browsers when the field has characters in it. The problem is that, when the field is filled with characters, these will run behind the x button until they reach the right side of the input before they are scrolled off of the left side of the input.

我有一个HTML5输入字段，当字段中包含字符时，它会在webkit浏览器中显示一个带有“x”的清晰按钮。问题是，当字段中填充了字符时，这些字符将在x按钮后面运行，直到它们到达输入的右侧，然后才从输入的左侧展开。

I want to define the width of the input area in which characters may appear. How is this done in the most cross-browser way possible? (I don't need the x buttons in all browsers, but I don't mind them when they do show up. I just need to define the area an input has available to visible characters so they start to scroll off to the left before they get behind the x buttons)

我想定义字符可能出现的输入区域的宽度。如何以最跨浏览器的方式实现这一点呢?(我不需要所有浏览器中的x按钮，但当它们出现时我并不介意。我只需要定义输入对可见字符可用的区域，这样在进入x按钮之前它们就开始向左滚动)

3 个解决方案

#1

Using padding-right CSS property

使用padding-right CSS属性

<input type="text" style="padding-right: 1em; width: 5em;">

#2

Its simple!

它的简单!

http://jsfiddle.net/neRWQ/1/

just "hide" the input and simulate one with an div. So you have a bit space on the right where the user cant write ;)

只需“隐藏”输入，并使用div来模拟输入。因此，在右边有一个位空间，用户不能写入;

<div class="input_container"><input type="TEXT" /></div>

< div class = " input_container " > < input type = " TEXT " / > < / div >

input {
background-color: white;
border: 0px;
width: 180px;
outline: 0px;
}
.input_container {
width: 200px;
border: 1px solid #000;
}

#3

If you are talking about search inputs (which hare the only ones that have a small x displayed in WebKit browsers that I can think of), I'd recommend removing the custom styling that causes more trouble than anything else:

如果您正在讨论搜索输入(只有在WebKit浏览器中有一个小的x显示)，我建议您删除引起更多麻烦的定制样式:

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

#1