CSSで文字列を...で省略する

文章が超絶に長い時、
どうしても省略したい時。

設定するCSSは以下。

style.css

.short_object {
    width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; /* Opera9,10対応 */
  }

上記のshort_objectを省略したいタグに設定するだけ。

index.html

<h4 class="short_object">オラオラオラオラオラオラ！!!!!!!!</h4>

出力結果

オラオラオ...

以上。