<input>タグ内のテキストが、まだパディングされていても途切れてしまうのはなぜですか？

Question

だから、<input>タグに既にパディングがあるにもかかわらず、<input>タグ内のテキストが途切れることがわかった。フォントの筆記体を筆記体に設定すると、さらに気づくでしょう。

は、この画像を見てみましょう：

のスクリーンショットの最初のテキストボックスは、タイプ=テキストと2番目のテキストボックスの入力がちょうどdiv要素です。入力テキストボックスは、文字 'j'の末尾を切り捨てますが、divテキストボックスは切り取られません。

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; 
} 

ここではjsfiddleへのリンクです： https://jsfiddle.net/9eLzqszx

ここでこの問題を回避するだろうか？明らかに、私は入力テキストボックスの中にテキストをカットしないようにしたい。

Answer 1

Jの曲線が、ブラウザが手紙の端であると考えるものの左側を過ぎているように見えます。両サイドにパディングを使用する代わりに、上/右/下にパディングを使用し、代わりに左にテキストインデントを使用すると、トリックを行う必要があります！

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

input要素は、ユーザがテキストを移動して移動できるようにするために、特別な要素です。アクティブなテキストゾーンはパディングによって増加しません。そのため、この動作が表示されます。 Firefoxは、テキストの幅が入力のアクティブなテキストゾーンよりも小さい場合、テキストを垂直にカットしないので、束よりも巧妙であるようです。

回避策はtext-indentを追加し、padding-leftを減少させるために、次のようになります。

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

あなたはフィドルover hereでそれを見ることができます。

Answer 4

このパディングのように、柔軟性を維持する=あなたの入力タイプにテキストをheight: auto;を追加し、オリジナルの効果を得るためにパディングを変更：14px 20px;