<input> टैग के अंदर पाठ क्यों पहले से ही पैडिंग होने पर भी कट ऑफ हो जाता है?

Question

ठीक है तो मुझे पता चला कि <input> टैग के अंदर का पाठ अभी भी काटा जाता है भले ही <input> टैग में पहले से ही पैडिंग है। जब आप अपनी फ़ॉन्ट शैली को किसी भी प्रकार के कर्सर पर सेट करते हैं तो आप इसे और अधिक देखेंगे।

इस छवि पर एक नज़र डालें:

स्क्रीनशॉट में पहले पाठ बॉक्स प्रकार = पाठ और दूसरे टेक्स्ट बॉक्स के एक इनपुट है सिर्फ एक div है। इनपुट टेक्स्ट बॉक्स चरित्र 'जे' की पूंछ को काटता है, जबकि div टेक्स्ट बॉक्स नहीं करता है।

HTML:

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

सीएसएस: https://jsfiddle.net/9eLzqszx

यहाँ क्या वैकल्पिक हल होगा:

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

div { 
    background-color: white; 
} 

यहाँ jsfiddle के लिए एक लिंक है? जाहिर है, मैं इनपुट टेक्स्ट बॉक्स के पैडिंग को इसके अंदर पाठ को काट नहीं देना चाहता हूं।

Answer 1

ऐसा लगता है कि जे के वक्र की तरह बाईं ओर से बाईं ओर जाता है जो ब्राउज़र को पत्र के किनारे माना जाता है। दोनों तरफ के लिए पैडिंग का उपयोग करने के बजाय, ऊपर/दाएं/नीचे के लिए पैडिंग का उपयोग करें और इसके बजाए बाईं ओर टेक्स्ट इंडेंट का उपयोग करें, इसे चाल करना चाहिए!

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

आप अपनी लाइन ऊंचाई संपत्ति को बढ़ाने का प्रयास कर सकते हैं। यह उन अक्षरों के लिए देखने योग्य क्षेत्र को प्रतिबंधित करेगा जिससे उन्हें काटा जा सकता है। हालांकि, यह शायद एक क्रैपी हैक है यदि आप इसे अपने div के समान आकार से मेल करना चाहते हैं।

Answer 3

एक इनपुट तत्व विशेष तत्व है क्योंकि इसे उपयोगकर्ता को अपने पाठ के माध्यम से नेविगेट करने की अनुमति देता है। इसका सक्रिय पाठ क्षेत्र पैडिंग द्वारा नहीं बढ़ाया जाता है, और यही कारण है कि आप यह व्यवहार देख रहे हैं। फ़ायरफ़ॉक्स गुच्छा से अधिक चालाक प्रतीत होता है, क्योंकि टेक्स्ट की चौड़ाई इनपुट के सक्रिय टेक्स्ट ज़ोन से छोटी है, क्योंकि यह पाठ को लंबवत रूप से काट नहीं देती है।

का संभावित हल text-indent जोड़ सकते हैं और padding-left कम करने के लिए किया जाएगा:

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

आप इसे एक बेला over here में देख सकते हैं।

Answer 4

लचीलापन रखने के लिए अपने इनपुट प्रकार के height: auto; जोड़ें = पाठ, और गद्दी को बदलने मूल असर पाने के लिए, इस गद्दी की तरह: 14px 20px;