LoginSignup
3
3

More than 5 years have passed since last update.

3点リーダを打ち消して改行させるCSS

Posted at

Reactのコンポーネントにデフォルトで設定されているoverflow時の3点リーダを打ち消して改行させる。

Material-UIのTableRowColumn

http://www.material-ui.com/#/components/table
Material-UIのTable(TableRowColumn)には下記のようなスタイルがデフォルトであたっている。

text-overflow: ellipsis;

これは、内容のテキストがテーブルセルの幅よりも大きくなったときに三点リーダを表示する。

スクリーンショット 2017-04-13 10.21.41.png

長い文字列を改行して全て表示させる

<TableRowColumn 
    key={index}
    style={{
        paddingLeft: 5,
        paddingRight: 5,
        whiteSpace: 'normal',
        wordWrap: 'break-word'}}>
    長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列
</TableRowColumn>
whiteSpace: 'nomal',
wordWrap: 'break-word'

を指定すれば改行されるようになる。

スクリーンショット 2017-04-13 10.21.58.png

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3