Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

gyarasu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away