text-overflowの検索結果1 - 2 件 / 2件

• あとで読む

  table-layout: fixed; せずに text-overflow: ellipsis; する - コンパイラかく語りき

  • 5 users
  • chuckwebtips.hatenablog.com
  • テクノロジー
  • 2020/10/20

  長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素で実現する方法について書きます。 固定幅テーブル まず、行が固定幅で良いのなら以下のように書けます。 table { table-layout: fixed; } td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } これで、tdの文字列が長すぎる場合にhogehogehoge... のように表示されます。 でも実務では、行は可変幅のままであって欲しいケースがほとんどだと思います。 可変幅テーブル 可変幅を保ったまま、tdの中身を省略記法にしたい場合は以下のとおりです。 table { /* table-layout: fixed; */ } td { white-space: nowrap; o

  • css

  
• あとで読む

  text-overflow: ellipsisが上手く動作しない？ 解決してあげよう。 - Qiita

  • 4 users
  • qiita.com/Nexus0831
  • テクノロジー
  • 2019/08/31

  まず、text-overflow: ellipsisとは、オーバーした分の文字列を...で省略してくれるというものです。 詳しくはMDN web docs: text-overflowを参照してください。 前提条件 まず、text-overflow: ellipsisを有効にするためには、以下のプロパティ達を設定する必要があります。 .over-text { /* オーバーした要素を非表示にする*/ overflow: hidden; /* 改行を半角スペースに変換することで、1行にする */ white-space: nowrap; /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */ width: 120px; /* オーバーしたテキストを３点リーダーにする */ text-overflow: ellipsis; } text-overflow: ellipsis

  • 検索
  • css