html入力フィールドでtext-overflow省略記号を使用するにはどうすればよいですか？

Question

私のWebページには、入力フィールドがあり、私は次のCSSを適用しているに：

.ellip { 
    white-space: nowrap; 
    width: 200px; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
} 

しかし、これは何の影響も与えていないようです。 ここで明白なことがありませんか、CSSを使用して入力フィールドに省略記号を付けることはできませんか？

Answer 1

フィールドは、独自のルールを持つ要素です。入力フィールドは、テキストがフィールドより長くなると、テキストが見えなくなるように実装されます。

フォームのフィールドを使用すると、テキストオーバーフローの省略記号を使用すると、切り捨てられた内容のみが送信されますが、これは望ましくない効果です。私のテストクロム、SafariやFirefoxの今、それをサポートするから

Answer 2

。彼らはわずかに異なる効果を持っていますが

。ブラーのFirefoxで

はテキストの右側に...追加しますが、テキストボックスの右側で隠された任意のテキストがある場合にのみ。

は、ぼかしのに対しChromeは、テキストの先頭にジャンプしているようだと関係なく、あなたがテキストのスクロール位置を左ところの、最後に...を追加します。

Answer 3

私は、これは古い質問ですけど、私は同じ問題を抱えて、私のために働いthis blog post from Front End Tricks And Magicに出くわしたので、私は、私は人々はまだ興味がある場合には共有したいと考え出しました。ブログの要点は、入力がreadonly属性を持っている場合に限り、IEの入力で省略記号を使用できることです。

明らかに、多くのシナリオでは、入力に読み取り専用属性を持たせたくありません。その場合は、JavaScriptを使用してそれを切り替えることができます。このコードはブログから直接取り上げられているので、この回答が参考になった場合は、ブログをチェックし、著者に感謝の言葉を残すことを検討することをお勧めします。

HTML：

<div class="long-value-input-container"> 
    <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long- 
    value-input" readonly /> 
</div> 

CSS：（jQueryのを使用して）

.long-value-input { 
    width: 200px; 
    height: 30px; 
    padding: 0 10px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

のJavaScript自体は私のためのトリックをした入力にtext-overflow:ellipsisを設定

// making the input editable 
$('.long-value-input').on('click', function() { 
    $(this).prop('readonly', ''); 
    $(this).focus(); 
}) 

// making the input readonly 
$('.long-value-input').on('blur', function() { 
    $(this).prop('readonly', 'readonly'); 
}); 

Answer 4

。入力がピントの合っていないときは、省略記号を切り捨てて配置します。