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


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

Material-UIのTableRowColumn

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

text-overflow: ellipsis;

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

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

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

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