BootStrap テキストに対して溢れた文字を省略

表示しているテキストが、意図しているものより長い場合、デザインが壊れないように溢れた文字を省略したいですよね。

それをBootStrapの画面サイズに合わせたCSS変更に合わせて適用するお話です。

問題

テキストがはみ出した!!
なんだこれ、カッコ悪い！

解決案1

色々調べてみると、CSSで以下のようなクラスを付けると良いらしいと知りました。

.textOverflow {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis; /* Opera9,10対応 */
}

が、だめ。
どうも、widthに対して%ではなく値(px等)を設定する必要があるようです。

解決案2

JavaScriptで初回アクセス時と画面サイズ変更時に要素のwidthを取得して、Styleに直接設定すればいいんじゃないか？
ということで試してみました。

$(function(){
  function textOverflow(){
    $('#textOverflow').each(function () {
      $(this).css('width', ($(this).width()));
    });
  }

  textOverflow();

  $(window).on('resize', function(){
    textOverflow();
  })
});

が、だめ。

1. 初回起動時には既に文字がはみ出しているため省略されない。
2. 画面のサイズ変更時にwidthがどんどん小さくなっていく問題が発生

親の要素の長さを取るなど、色々試しましたが一旦諦めました。

解決策

今回のはみ出していた箇所はTableだったため、以下のスタイルを追加しました。

.panel-table {
    table-layout: fixed;
}

これで、要素の長さにかかわらず、テーブルの各項目がテーブルの横幅を平均したwidthになりました。 また、他のテーブル項目(今回で行ったらゴミ箱)は小さくて良いので、個別にwidthを指定することでタイトルを長く設定しました。

はみ出した文字が…で省略されています。

画面サイズを変更した場合、幅によっては省略されていません。

新たな問題

タイトルが中央寄りになってしまいました。左幅よりにしたいですが、スタイルの設定上できないようです。

BootStrapで画面リサイズ時の対応は検索すれば直ぐに方法が出ると思っていましたが、予想以上に情報が無かったです。
皆さんjQueryやらでささっと組んでしまうんでしょうか？