Material-UIのRaisedButtonでラベルが見切れたときに三点リーダを表示する

※本記事の内容はMaterial-UI v0.16.7にもとづいています。

RaisedButtonの構造

RaisedButtonは、下記のようなHTML構造になっている。

<div>・・・①
  <button>・・・②
    <div>・・・③
      <div>・・・④
        <span>「ラベル文字列」</span>・・・⑤
      </div>
    </div>
  </button>
</div>

RaisedButtonのスタイル関連のプロパティ

RaisedButtonにはスタイルを指定するプロパティが複数存在する。
表にまとめると下記の通り。

プロパティ名	説明	HTML構造における対応箇所
buttonStyle	button要素のインラインスタイルを上書きする	②
labelStyle	ボタンのラベル要素のインラインスタイルを上書きする	⑤
overlayStyle	ボタンオーバーレイ時のインラインスタイルを上書きする	④
rippleStyle	ボタン押下時の波紋のインラインスタイルを上書きする	クリック時に③と④の間に生成されるspan
style	ルート要素のインラインスタイルを上書きする	①

RaisedButtonのデフォルト状態での描画

RaisedButtonに対して何もスタイルを指定しないと下図のようなり、画面幅を縮めた場合などにラベルが入り切らない。

default.js

<RaisedButton
  label="ラベルラベルラベルラベル"
  primary={true} />

RaisedButtonのラベルがはみ出たときに3点リーダにする

下図のように、3点リーダに置き換えるには少し工夫が必要になる。

ポイントは下記3つ

• ルート要素（①）にwidthを指定し、minWidthを解除する（親要素に幅を合わせる）
• ③の要素にoverflow, white-space, text-overflowを指定する
• ラベル要素（⑤）にpadding-left, padding-rightを指定する（キレイに見せるため）

③に関しては、RaisedButtonのプロパティで指定できないので、インラインではなくcssに切り出す。
最終的なソースコードは下記。

ellipsis.js

<RaisedButton
  label="ラベルラベルラベルラベル"
  primary={true}
  style={{width: '100%', minWidth: 0}}
  labelStyle={{paddingLeft: 0, paddingRight: 0}}
  className="ellipsisButton" />

layout.css

.ellipsisButton button div div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}