CSS：テキストを折り返さず【...】で省略したい

CSS：テキストを折り返さず【...】で省略したい

いつも忘れてしまうオーバーフローの処理です。

リストだから折り返さないで欲しい。そんな時は多々あります。
サイズ変わると見た目がね。

以前書いたことあるのですが「あれ？これで良かったよな」と思いながらできなかったので備忘録を記します。

正しいスクリプト

CSS

    .overflow
        {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 20px;
        width:200px;
        margin:0px;
        padding:0px;
        }

HTML

<table>
    <tr>
        <td>
            <p class="overflow">hogehogehogehogehogehogehogehoge</p>
        </td>
    </tr>
</table>

これで幅200pxからはみ出る分は【...】として省略表記されます。

今回の間違ったスクリプト

色々な幅で利用したかったのでCSSからwidthを外し、個別の設定でフォローする事にしこんな記載をしました。
CSS

    .overflow
        {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 20px;
        margin:0px;
        padding:0px;
        }

HTML

<table>
    <tr>
        <td style="width:200px;" class="overflow">
            hogehogehogehogehogehogehogehoge
        </td>
    </tr>
</table>

何が違うかと言うと【class:overflow】をテーブルセルで呼んでしまってます。

これがNGなんですね。

『オーバーフローした分を省略』は文字に掛かるのでセルにかけてもしょうがないと言う事でしょう。

ちなみに、spanタグで動作するかなと思い試してみましたが駄目でした。divはOKでした。

追加記事

レスポンシブでも同じ様に動作させたいときにはJavaScriptと組み合わせで