CSSで、はみだし省略 w/ Ellipsis

html の table は、各行がきれいであってほしい。セルの中で改行されていたりするとがっかりする。（下の1行目の項目3）

かといって、長い文字列が含まれる項目もあるので、そういう場合は、td に埋め込む前に Rails 側で truncate していた。
その場合、表示されるサイズを確認しながら、 truncate する文字数を調整する必要があるし、デザイン変更の度に再調整がいる。また、サイズの異なる画面だと、無駄にtruncateしてしまっているように見え、それはそれでかっこわるい。

自分が知らなかっただけであるが、なんとCSSだけで完璧に対応できるらしい。（下の1行目の項目3）

このような感じで、スペースに収まらないものは、省略して、… としてくれる。
Rails で truncate してたときも、… としてはくれるが、前述のサイズの問題もあるし、当然、DOM要素としても、省略された値となる。なので、CSSで見た目だけ、省略してくれるのは、トータルで美しい。

CSSだけで実現するには:

<style>
  table{
    width: 50%;
    table-layout: fixed;
  }
  th, td {
    width: 33%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<table>
  <tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
  </tr>
  <tr>
    <td>あいうえお</td>
    <td>あいうえお</td>
    <td>あいうえおかきくけこ</td>
  </tr>
</table>

必要なのは:

table に table-layout: fixed を指定

• auto : テーブルの列幅を自動レイアウトにする（デフォルト）
• fixed : テーブルの列幅を固定レイアウトにする
  今までcol幅指定してるのに、 table-layout を指定していなかった。。(つまり auto）
  fixed にしている方が、列幅の計算がされないため、renderingも早いとのこと。

td に以下の3つを指定

1. over-flow に hidden
   ボックスからはみだす部分の扱いをどうするかという指定
   - visible : はみだしてでも表示する（デフォルト）
   - hidden : はみだす部分は表示しない。スクロールもできないので、はみだした部分を見ることはできない。
   - scroll : 常にスクロールバーを表示する
   - scroll : 必要ならスクロールバーを表示する
2. text-overflow に ellipsis
   テキストがあふれていることユーザに知らせるを方法を指定
   - clip : 切り取る。文字の途中で切る取られる場合もある（デフォルト）
   - ellipsis : … を表示する
   - <string> : 指定された文字列を表示する
3. white-space に nowrap
   空白文字をどう扱うかを指定
   - normal : 連続する空白は1つになる。改行も空白として扱われる（デフォルト）
   - nowrap : 連続する空白は1つにするが、行の折り返しはしない
   - pre : 連続する空白はそのまま残し、改行も残す。

今回の目的は、table 内のセルで折り返しが発生するのを避けたいということだったので、td を対象にしてるが、これらは ブロック要素 であれば適用できる。
当然、その場合は、table への table-layout: fixed は要らない。