Recht ausgerichteter kursiver Text im Textfeld abgeschnitten

Question

Ich habe ein paar Textfelder, die schreibgeschützt sind. Ich habe diesen Text kursiv geschrieben, aber für numerische Felder, bei denen ich auch den Text rechts ausgerichtet habe, wird die letzte Zahl abgeschnitten. Das Hinzufügen von Padding macht nur das Textfeld größer, behebt aber nicht das Problem, wie es im Bild zu sehen ist (Total Cost hat etwa 20px Padding und Cost hat nur 5px). Wie kann ich das anders beheben, als nur den kursiven Text loszuwerden? Ich habe gesucht und habe nichts gefunden, das das anspricht, also wenn Sie einen Link irgendwo haben, würde ich glücklich sein, es heraus zu überprüfen.

Dies ist nicht spezifisch Browser, so dass es auf der ganzen Linie geschieht, ist Chrome der für das Bild verwendet oben und hat die auffälligste Veränderung. Wenn die Seite zum ersten Mal geladen wird, wird sie korrekt angezeigt, nichts wird abgeschnitten. Dies ist Teil eines Formulars. Wenn Sie also eine andere Option aus einem Dropdown-Feld auswählen, ändert sich der Text in diesen schreibgeschützten Feldern, wenn das Problem auftritt. Fast so, als würde das Styling geändert, wenn eine neue Option gewählt wurde. Ich habe keine Stiländerungen, Klassenänderungen oder irgendetwas im Code bemerkt. Könnte etwas übersehen haben, aber bisher ist nichts herausragend. Hier

ist ein jsFiddle: jsfiddle.net/mK6JK

Diese nicht vollständig die gleiche wie die Frage gestylt ist, aber die wichtigsten Styling-Klassen hinzugefügt. Problem ist, dass es auf der Geige gut aussieht. Habe aber immer noch das Problem auf meiner Produktionsversion.

Answer 1

Bitte schauen Sie in die folgende html & css. Ich bekomme in keinem Browser irgendein Problem. Html

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

Css

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

http://jsfiddle.net/SqX75/

Answer 2

Ich hatte ein ähnliches Problem, aber mit <div> Inhalt. Ich habe gerade hinzugefügt width: 110% und es löste mein Problem. hoffe, es wird für jemand anderen nützlich sein.

Answer 3

Soweit ich sagen kann, ist dies abhängig vom Browser und es gibt nicht wirklich eine Möglichkeit, es weg zu gehen. Das Eingabefeld ist ein ersetztes Element und die Art und Weise, wie es aussieht und sich verhält, wird von der Kombination aus Betriebssystem + Browser beeinflusst.

Eine mögliche Problemumgehung besteht darin, die letter-spacing-Eigenschaft auf dem Element input auf etwa 2 oder 3px festzulegen. Dies wird natürlich alle Charaktere ausräumen. Abhängig von Ihrer Schriftart und Design, sieht dies nicht so schrecklich aus

Was ich am Ende getan wurde, war sicherzustellen, dass ein Leerzeichen am Ende über Javascript hinzugefügt wurde, wenn das Feld geändert wurde.

Answer 4

Sie müssen auf der rechten Seite des Textfelds eine Füllung hinzufügen.

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

und fügen Sie CSS

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