CSSでウィンドウ幅にテキストを合わせる方法【PHPのmb_strimwidthは不要に！】

CSSのみでテキストをウィンドウ幅に合わせてテキストを動的に省略させます。
指定した幅以上に文字がはみ出る場合は自動的にテキスト末尾を「・・・」に変更してくれます。

今までPHPで

$q = mb_strimwidth($q, 0, 40, "...", 'utf-8');

こんな感じで文字数を制限かけていましたが、表示する端末によって動的に表示できるようになり、尚且つPHPの処理が１つ減りいいことずくめですね。

■css部分

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

■HTML部分

ここにはテキストが入ります。ウィンドウ幅に来ると文字の末尾が自動的に・・・になります。

または、

overflow: hidden;
    width: 305px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-text-overflow:ellipsis; /* Firefox */
    -o-text-overflow: ellipsis; /* Opera */

こっちの方がいいかも

「text-overflow: ellipsis;」と「overflow:hidden;」と改行防止の「white-space:nowrap;」
Firefox対応に「-moz-text-overflow:ellipsis;」、Opera対応に「-o-text-overflow:ellipsis;」を加える