ellipsisの検索結果1 - 4 件 / 4件

• あとで読む

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

  • 5 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

  
• あとで読む

  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

  
• あとで読む

  Flexbox内でテキストを省略(ellipsis使用)できないバグの対応 - Qiita

  • 4 users
  • qiita.com/teppeita
  • テクノロジー
  • 2020/03/20

  Flexboxを使っていて、なんだかテキストの省略が効かないなと思うことが有りました。 調べると対策が分かったのですが、Qiitaには記事が無さそうだったので、まとめてみました。 問題が発生する条件 Flexbox内で、サイズ指定の無い親要素の中で文字省略しようとしてもできない。 (親要素のサイズを指定すれば文字省略されます) See the Pen OZRLaj by teppei (@peitetsu) on CodePen. よく有るパターン Flexbox内で、一部要素をサイズ固定にし、残りを flex: 1 とする場合も省略されない。 See the Pen VxKZwJ by teppei (@peitetsu) on CodePen. 解決策 親要素に overflow: hiddenもしくは　min-width: 0を指定すると解決するようです。 個人的には oveflow

  • css

  
• あとで読む

  Less… Is More? Apple’s Inconsistent Ellipsis Icons Inspire User Confusion - TidBITS

  • 3 users
  • tidbits.com
  • テクノロジー
  • 2019/09/03

  Image by PublicDomainPictures from Pixabay As I’ve been exploring iOS 13 to write the just-released Take Control of iOS 13 and iPadOS 13, I’ve become concerned about what seems to be an increasingly frequent pattern in iOS software design. What finally pushed me over the edge into writing this article was documenting Apple Card’s user interface in Wallet (see “How to Get the Most from Your Apple C

  • ui