overflow,overflow-x,overflow-y 「オーバーフローしたコンテンツの表示」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
  height        : 20px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_overflow_visible{
  overflow : visible;
}
.css_overflow_hidden{
  overflow : hidden;
}
.css_overflow_scroll{
  overflow : scroll;
}
.css_overflow_auto{
  overflow : auto;
}
.css_overflow-x_visible{
  overflow-x : visible;
  white-space: nowrap;
}
.css_overflow-x_hidden{
  overflow-x : hidden;
  white-space: nowrap;
}
.css_overflow-x_scroll{
  overflow-x : scroll;
  white-space: nowrap;
}
.css_overflow-x_auto{
  overflow-x : auto;
  white-space: nowrap;
}
.css_overflow-y_visible{
  overflow-y : visible;
}
.css_overflow-y_hidden{
  overflow-y : hidden;
}
.css_overflow-y_scroll{
  overflow-y : scroll;
}
.css_overflow-y_auto{
  overflow-y : auto;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">overflow:visible;</div>
  <div class="css_overflow_visible">
  はみ出して表示。～はみ出して表示。
  </div>
  <div class="cssTitle">overflow:hidden;</div>
  <div class="css_overflow_hidden">
  はみ出した部分は表示しない。～はみ出した部分は表示しない。
  </div>
  <div class="cssTitle">overflow:scroll;</div>
  <div class="css_overflow_scroll">
  はみ出した部分はスクロールで表示。～はみ出した部分はスクロールで表示。
  </div>
  <div class="cssTitle">overflow:auto;</div>
  <div class="css_overflow_auto">
  ブラウザに依存。～ブラウザに依存。
  </div>
  <div class="cssTitle">overflow-x:visible; (nowarap指定)</div>
  <div class="css_overflow-x_visible">
  はみ出して表示。～はみ出して表示。
  </div>
  <div class="cssTitle">overflow-x:hidden; (nowarap指定)</div>
  <div class="css_overflow-x_hidden">
  はみ出した部分は表示しない。～はみ出した部分は表示しない。
  </div>
  <div class="cssTitle">overflow-x:scroll; (nowarap指定)</div>
  <div class="css_overflow-x_scroll">
  はみ出した部分はスクロールで表示。～はみ出した部分はスクロールで表示。
  </div>
  <div class="cssTitle">overflow-x:auto; (nowarap指定)</div>
  <div class="css_overflow-x_auto">
  ブラウザに依存。～ブラウザに依存。
  </div>
  <div class="cssTitle">overflow-y:visible;</div>
  <div class="css_overflow-y_visible">
  はみ出して表示。～はみ出して表示。
  </div>
  <div class="cssTitle">overflow-y:hidden;</div>
  <div class="css_overflow-y_hidden">
  はみ出した部分は表示しない。～はみ出した部分は表示しない。
  </div>
  <div class="cssTitle">overflow-y:scroll;</div>
  <div class="css_overflow-y_scroll">
  はみ出した部分はスクロールで表示。～はみ出した部分はスクロールで表示。
  </div>
  <div class="cssTitle">overflow-y:auto;</div>
  <div class="css_overflow-y_auto">
  ブラウザに依存。～ブラウザに依存。
  </div>
</div>