CSSではみ出した部分を「…」にする方法

CSSではみ出した部分を「…」にする方法をメモしておきます．

.hogehoge {
    width: 4em;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="hogehoge">どうしてプログラムのサンプルに使うテキストは「ほげほげ」なんだろう？</div>

「text-overflow: ellipsis;」と記せば，「…」にならなかったので，何でだろうとずっと悩んでいたのですが， このプロパティは，先の例のように他の3つのプロパティといっしょに使わないと効果が発揮されないんですね． ようやく謎が解けた．＼(^O^)／