Warum wird der Text in einem -Tag abgeschnitten, auch wenn bereits ein Padding vorhanden ist?

Question

Ok, so fand ich heraus, dass der Text in einem <input> Tag noch abgeschnitten wird, obwohl das <input> Tag bereits eine Auffüllung hat. Sie werden es bemerken, wenn Sie Ihren Schriftstil auf etwas Kursives einstellen.

Werfen Sie einen Blick auf diesem Bild:

Das erste Textfeld in dem Screenshot ein Eingang vom Typ = Text und das zweiten Textfeld ist nur ein div. Das Eingabetextfeld schneidet den Schwanz des Zeichens 'j' ab, während das Textfeld 'div' dies nicht tut.

HTML:

<input type="text" value="juvenescent" /> 
<div>juvenescent</div> 

CSS:

input, div { 
    font-family: cursive; 
    font-size: 2em; 
    padding: 15px 20px; 
    margin-bottom: 10px; 
    width: 300px; 
    border: 1px solid black; 
} 

div { 
    background-color: white; 
} 

Hier ist ein Link auf die jsfiddle: https://jsfiddle.net/9eLzqszx

Was die Abhilfe hier sein würde? Offensichtlich möchte ich das Padding der Eingabetextbox NICHT den Text darin schneiden.

Answer 1

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. Verwenden Sie anstelle von Padding für beide Seiten Padding für oben/rechts/unten und stattdessen Text-Einzug für die linke Seite, sollte es den Trick tun!

input { 
    font-family: cursive; 
    font-size: 2em; 
    padding: 15px 20px 15px 0; 
    font-style:italic; 
    margin-bottom: 10px; 
    width: 300px; 
    border: 1px solid black; 
    text-indent: 20px; 
} 

https://jsfiddle.net/will0220/pxrs321f/3/

Answer 2

Sie könnten versuchen, Ihre Zeilenhöheneigenschaft 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 beschissener Hack, wenn du möchtest, dass er die gleiche Größe wie dein div hat.

Answer 3

Ein Eingabeelement ist ein spezielles Element, wie es geschnitten werden muss und dem Benutzer ermöglichen, 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.

würde Eine Abhilfe sein text-indent hinzufügen und padding-left verringern:

text-indent: 5px; 
padding-left: 15px; /* Originally 20px */ 

Sie es in einer Geige over here sehen können.

Answer 4

hinzufügen height: auto; zu Ihrem input type = text Flexibilität zu halten, und die Polsterung ändern, um die ursprüngliche Wirkung, wie diese Polsterung zu bekommen: 14px 20px;