Warum wird der Text in einem Eingabe-Tag abgeschnitten, selbst wenn bereits ein Padding vorhanden ist?
Ok, ich habe herausgefunden, dass der Text in einem <input> -Tag immer noch abgeschnitten wird, obwohl das <input> -Tag bereits eine Auffüllung hat. Sie werden es bemerken, wenn Sie Ihren Schriftstil auf etwas kursives setzen.
Sieh dir dieses Bild an:
Das erste Textfeld im Screenshot ist eine Eingabe von type = text und das zweite Textfeld ist nur ein div. Das Eingabetextfeld schneidet den Schwanz des Zeichens 'j' ab, während das div-Textfeld dies nicht tut.
HTML:
%Vor%CSS:
%Vor%Hier ist ein Link zur jsfiddle: Ссылка
Was wäre die Problemumgehung hier? Offensichtlich möchte ich das Padding der Eingabetextbox NICHT den Text darin schneiden.
4 Antworten
Es sieht so aus, als ob die Kurve des J über die linke Seite des Browsers hinausgeht, was der Browser als die Kante des Buchstabens ansieht. Anstatt Padding für beide Seiten zu verwenden, verwenden Sie Padding für oben / rechts / unten und stattdessen Text-Einzug für die linke, sollte es den Trick tun!
%Vor%Ein Eingabeelement ist ein spezielles -Element, das abgeschnitten werden muss und es dem Benutzer ermöglichen soll, durch seinen Text zu navigieren. Die aktive Textzone wird nicht durch das Padding vergrößert, und deshalb sehen Sie dieses Verhalten. Firefox scheint schlauer zu sein als der Haufen, da es den Text nicht vertikal schneidet, wenn die Breite des Textes kleiner ist als die aktive Textzone des Eingangs.
Eine Umgehungslösung wäre das Hinzufügen von text-indent und das Verringern von padding-left :
Sie können es in einer Geige hier sehen.
Sie könnten versuchen, die Eigenschaft Zeilenhöhe zu erhöhen. Das würde den sichtbaren Bereich für die Buchstaben einschränken, die dazu führen, dass sie abgeschnitten werden. Allerdings ist das wahrscheinlich ein harter Schlag, wenn du willst, dass er die gleiche Größe wie dein div hat.