web-dev-qa-db-ja.com

HTML入力フィールドでテキストオーバーフローエリプシスを使用するにはどうすればよいですか？

私のWebページには、次のcssを適用した入力フィールドがあります。

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

しかし、これは効果がないようです。ここで明らかな何かを見逃していますか、CSSのみを使用して入力フィールドに省略記号を含めることはできませんか？

htmlcssellipsis
47
Jelly Ama

私はこれが古い質問であることを知っていますが、私は同じ問題を抱えていて、遭遇しました Front End Tricks And Magicからのこのブログ投稿 それは私のために働いたので、私は人々がいる場合に共有すると思いましたまだ興味があります。ブログの要点は、入力にreadonly属性がある場合のみ、IE=）の入力でも省略記号を使用できることです。

明らかに、多くのシナリオでは、入力に読み取り専用属性を持たせたくありません。この場合、JavaScriptを使用して切り替えることができます。このコードはブログから直接取得したものであるため、この回答が役立つと思う場合は、ブログをチェックアウトし、著者に感謝のコメントを残すことを検討してください。

// 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');
});
.long-value-input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-value-input-container">
  <input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
</div>
24
jennEDVT

設定text-overflow:Ellipsis入力自体のトリックは私のためにした。入力の焦点が外れると、省略記号を切り捨てて配置します。

19
Mo Bitar

私のテストでは、Chrome、Safari、Firefoxがサポートしています。

ただし、効果はわずかに異なります。

ぼかしでは、Firefoxは...をテキストの右側に追加しますが、テキストボックスの右側にテキストが隠れている場合のみです。

一方、ぼかしChromeは、テキストのスクロール位置を離れた場所に関係なく、テキストの先頭にジャンプし、末尾に...を追加するようです。

4
Greg