TABLEでCSSのtext-overflow:ellipsisを効かせたい場合
通常は折り返されるような長い文字列を途中でカットして三点リーダーを付けてくれるtext-overflow:ellipsisって便利ですよね。
今回、そのellipsisをTABLEタグの中で使おうと思ってハマったので備忘録として解決策を残しておきます。
まずは簡単なPタグの事例から。
Pタグでtext-overflow:ellipsisを指定
通常のPタグでの表示例
こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。
普通はこうして文章が折り返されます。
overflow:hidden;を指定した例
こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。
overflow:hidden;を指定すると文章は折り返されず、スパッと省略されます。
text-overflow:ellipsis;を指定した例
こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。
overflow:hidden;に加えてtext-overflow:ellipsis;を指定すると文章はスパッと省略されつつ、三点リーダーが付与されます。
HTMLとCSS
一応、上述のサンプルコードを掲載しておきます。
<p class="normal">こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。</p>
<h3>overflow:hidden;を指定した例</h3>
<p class="nowrap">こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。</p>
<h3>text-overflow:ellipsis;を指定した例</h3>
<p class="ellipsis">こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。</p>
<style>
p.normal {
border:1px solid gray;
}
.nowrap {
white-space:nowrap;
overflow:hidden;
border:1px solid gray;
}
p.ellipsis {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid gray;
}
</style>TABLEの場合はデフォルトではoverflowが効かない
まず、大前提としてTABLEというか、TDにはoverflowは効きません。
| こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。 |
先述したPタグの例と同じようにTDのスタイルを指定するとこのとおり、ページの右端を超えてそのまま文章が突き進んでしまい、ページのレイアウトを壊しまくります。
TABLEでoverflowを効かせるにはtable-layout:fixed;を使う
てっとり早くTABLEタグでoverflowやellipsisを使うにはtable-layout:fixed;を指定するのが楽です。
table-layout:fixed;を使った表示例
| こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。 |
HTMLとCSS
<table class="ellipsis">
<tr>
<td>
こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。
</td>
</tr>
</table>
<style>
table.ellipsis {
table-layout:fixed;
width:100%;
}
table.ellipsis td {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid gray;
}
</style>table-layout:fixed;を使うと幅の自動調整が働かない
table-layout:fixed;は簡単でてっとり早いのですが、TABLEタグを使う上で便利な幅の自動調整機能が機能しません。table-layout:fixed;で列が複数あった場合の表示例
| 幅が短い項目1 | 幅が短い項目2 | table-layout:fixedは便利だけれど可変幅に対応できないという問題がある |
普通のTABLEタグなら、「幅が短い項目1」「幅が短い項目2」は短い幅で、残りは長い幅に自動調整してくれるところですが、table-layout:fixed;を使ったため、幅が均等に設定されます。
これで構わない場合もあるでしょうし、あるいは最初2つの項目はwidth:10em;等、列幅を指定しても構わない、ということであればtable-layout:fixed;を使うのが良いでしょう。
fixedを使わず可変幅に対応する場合
ほんの少しだけ複雑になりますが、可変幅を有効にしたまま、overflowやellipsisを使う方法もあります。
表示例
| 幅が短い項目1 | 幅が短い項目2 | table-layout:fixedは便利だけれど可変幅に対応できないという問題がある |
HTMLとCSS
<table class="ellipsis2">
<tr>
<td>幅が短い項目1</td>
<td>幅が短い項目2</td>
<td>table-layout:fixedは便利だけれど可変幅に対応できないという問題がある</td>
</tr>
</table>
<style>
table.ellipsis2 {
width:100%;
}
table.ellipsis2 td {
white-space:nowrap;
border:1px solid gray;
}
table.ellipsis2 td:nth-child(1) {
width:1px;
}
table.ellipsis2 td:nth-child(2) {
width:1px;
}
table.ellipsis2 td:nth-child(3) {
overflow:hidden;
text-overflow:ellipsis;
max-width:0;
}
</style>三点リーダーを付けたい列にはmax-width:0;を指定し、ほかの項目はwidth:1px;にするのがポイントです。全部0じゃダメですよ。すべて同じ幅だと均等に幅を調整してしまうので、あくまで最小幅にする列は1pxです。いやもちろん1％だろうと1emだろうと、単位は何でも良いですがｗ
まとめ
- white-space:nowrap;とoverflow:hidden;をブロック要素に指定すると文字列を折り返さず、表示幅最大のところでスパッと切ってくれる。
- 更にtext-overflow:ellipsis;を使うと三点リーダーを付けてくれる。
- しかしTABLEのTDはoverflow:hidden;が効かない。（詳しいことは知らんけど、たぶん幅が決まってないから？）
- table-layout:fixed;を付ければoverflow:hidden;が効くようになるが、今度は幅の自動調整が効かなくなる。
（でも見やすくて楽なので幅を指定しても良いならこの方法がオススメ） - table-layout:fixed;を使わず、overflow:hidden;を効かせるためにはhiddenしたい列のmax-widthを0に、それ以外の列を1pxにする。
といったところでしょうか。
いえね、最初にハマったときにすぐググって、max-widthを0にすればおｋ！という記事をいくつも読んだのですが、実際やってもうまくいかんのですよ。2年以上前の記事だったりしたので、ブラウザのバージョン違いとかですかね？
ともあれ、TABLEの可変幅の機能はそのままに、三点リーダーも付けたかったので、あれこれ試行錯誤しているうちにたまたま（？）うまく動いた感じです。
というわけであんまり自信ないんですけど、一応これで出来ましたよ、ということで、ここにたまたま訪れた誰かのお役に立てば幸いです。
