label - ラベルの CSS テキストオーバーフロー

Question

私のウェブサイトには、横にラベルが付いたチェックボックスがありますが、ラベルのテキストがたとえば 60px よりも長い場合、テキストを切り取りたいと考えています。

については知っていますtext-overflow: clip。これはまさに私が望んでいることですが、何らかの理由でラベルでは機能しません。代わりに div を使用することは、テキストをクリックしてチェックボックスを選択することができないため、本当に良い解決策ではありません。

これどうやってするの？

Answer 1

label または span はデフォルトでインラインです。インライン要素に幅を設定することはできません。ラベルをインラインブロックにする

/// マークアップ

<input type="checkbox"/> <label style="display: inline-block; width: 60px; overflow: hidden">Sample text sample text</label>

Answer 2

ここではユーティリティ クラスellipsisを使用できます。

.ellipsis {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}