文本框中的右对齐斜体文本被截断答案

【问题标题】：Right Aligned Italic Text in textbox cut off文本框中的右对齐斜体文本被截断
【发布时间】：2014-02-23 00:12:25
【问题描述】：

我有几个只读的文本框。我已经将该文本设置为斜体，但对于我还右对齐文本的数字字段，最后一个数字被截断。添加填充只会使文本框变大，但不能解决您在图像中看到的问题（总成本大约有 20 像素的填充，成本只有 5 像素）。除了摆脱斜体文字之外，我该如何解决这个问题？我已经搜索并没有找到任何解决此问题的方法，因此如果您在某处有链接，我很乐意查看。

这不是特定于浏览器的，因此它会全面发生，Chrome 是用于上图的一种，并且具有最明显的变化。当页面第一次加载时，它会正确显示，没有任何中断。这是表单的一部分，因此一旦您从下拉列表中选择了另一个选项，这些只读框中的文本就会发生变化，这就是问题发生的时候。好像选择新选项时更改样式。我没有注意到任何样式更改、类更改或代码中的任何内容。可能会忽略一些东西，但到目前为止没有什么突出的。

这是一个 jsFiddle：jsfiddle.net/mK6JK

这与问题的样式不完全一样，但添加了主要的样式类。问题是它在小提琴上看起来很好。但是我的生产版本仍然存在问题。

【问题讨论】：

这个比较乱，最后加几个空格？
我相信溢出：隐藏；更正此Link
我打算尝试的空间，但这是动态生成的，我不想引入额外的字符，这会使开发人员的代码（窃取你的话）变得混乱。我已经改变了显示和宽度，但同样，这似乎只是改变了框的大小而不影响文本。让我看看把小提琴放在一起，所有的代码都在描述中，但我知道那不合适。
我也有这个问题。现在已经是 2017 年了，仍然没有任何解决方法吗？直到此刻，是否有任何网络浏览器开发人员不知道这个问题？很尴尬。
@TaufikNurRahmanda - 我在 2020 年

标签： css textbox italic right-align

【解决方案1】：

请查看下面的 html 和 css。我在任何浏览器中都没有遇到任何类型的问题。 html

<input type="text" class="italic" value="1236" />

CSS

.italic{
    font-style:italic;
    padding: 10px;
    text-align: right;
}

http://jsfiddle.net/SqX75/

【讨论】：

【解决方案2】：

您必须在文本框的右侧添加填充。

<input type="text" class="classnum" />

并添加 CSS 规则：

.classnum {
    text-align: right;
    font-style: italic;
    padding-right: 3px;
}

【讨论】：

【解决方案3】：

我遇到了类似的问题，但有 <div> 内容。我刚刚添加了width: 110%，它解决了我的问题。希望它对其他人有用。

【讨论】：

【解决方案4】：

据我所知，这取决于浏览器，没有办法让它消失。输入字段是一个被替换的元素，它的外观和行为方式受您的操作系统+浏览器组合的影响。

一种可能的解决方法是将input 元素上的letter-spacing 属性设置为大约2 或3 像素。这当然会隔开所有字符。根据您的字体和设计，这可能看起来不那么糟糕

我最终做的是确保在字段更改时始终通过 Javascript 在末尾添加一个空格。

【讨论】：