text-overflow 「オーバーフローしたテキストの省略表示」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-clip{text-overflow : clip;}
.css-ellipsis{text-overflow : ellipsis;}
.css-string{text-overflow : "*";}
.css-clip-clip{text-overflow : clip clip;}
.css-ellipsis-ellipsis{text-overflow : ellipsis ellipsis;}
.css-string-ellipsis{text-overflow : "*" ellipsis;}
.css-hidden-nowrap{
  overflow : hidden;
  white-space : nowrap;
}
.css-direction-rtl{direction: rtl;}
.css-margin{margin: 0 -1em;}
.css-nowrap{white-space : nowrap;}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">text-overflow 指定なし<br>（改行なし全文表示）</div>
  <div class="css-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:clip</div>
  <div class="css-clip css-hidden-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:ellipsis</div>
  <div class="css-ellipsis css-hidden-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:"*"</div>
  <div class="css-string css-hidden-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:clip<br>(direction: rtl)</div>
  <div class="css-clip css-direction-rtl css-hidden-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:ellipsis<br>(direction: rtl)</div>
  <div class="css-ellipsis css-direction-rtl css-hidden-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:"*"<br>(direction: rtl)</div>
  <div class="css-string css-direction-rtl css-hidden-nowrap">
  オーバーフローしたテキストは切り取り表示しない
  </div>
  <div class="cssTitle">text-overflow:clip clip<br>(margin: 0 -1em)</div>
  <div class="css-clip-clip css-hidden-nowrap">
  <span class="css-margin">
  オーバーフローしたテキストは切り取り表示しない</span>
  </div>
  <div class="cssTitle">text-overflow:ellipsis ellipsis<br>(margin: 0 -1em)</div>
  <div class="css-ellipsis-ellipsis css-hidden-nowrap">
  <span class="css-margin">
  オーバーフローしたテキストは切り取り表示しない</span>
  </div>
  <div class="cssTitle">text-overflow:"*" ellipsis<br>(margin: 0 -1em)</div>
  <div class="css-string-ellipsis css-hidden-nowrap">
  <span class="css-margin">
  オーバーフローしたテキストは切り取り表示しない</span>
  </div>
</div>