領域に収まらない文字数を「...」にしたい

css

1行とのき

行が1行のときなら、以下のCSSで、超えた部分を「...」に変えてくれる。

  overflow:hidden;
  text-overflow:ellipsis;

ちなみにこれはIEが先進的に取り入れたものであり、他のブラウザでは使えなかったというのを
多く読んだが、使いたい最近のブラウザで使用可能なことを確認した。

参考

http://www6.plala.or.jp/go_west/nextcss/ref/prp/ext_msie/txt_ofl.htm

しかし複数行になるところは

しかし複数行になるところは、「...」に置き換わらない。

JSで対応

参考

javascript - Insert ellipsis (...) into HTML tag if content too wide - Stack Overflow

すこし改良

ちなみにCSSが
引用：

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
}

.ellipsis.multiline {
        white-space: normal;
}

となっていますが、これだと英字が続いた場合、以下の記事の理由により「...」にならない。
table-cell でレイアウトしたいとき - bi_naの日記
英字が続くとどこで折り返してよいのかわからず、領域が横に伸びてしまうのだ。
ちなみに視覚的には伸びているのに気づきにくい場合がある。Developer Toolなどで、どのような領域（ボックスモデル）になっているか
確認することでこの事実に気づいた。

そこで次のCSSを追加

word-wrap : break-word;

しかしこれまた、先進的な実装らしく、本当は break-all;にしたかったのだけど、
break-all;がFirefoxが対応しておらず、break-wordなら使いたいブラウザで対応できていることを確認でき、break-word;を使用することにした。

PHPで文字数指定でやる場合はこちら

mb_strimwidth
PHP: mb_strimwidth - Manual