<h3>一行文字不換行</h3>
<div class="containing-block">
  <span class="inner not-wrap">Lorem ipsum dolor sit, amet consectetur elit.</span>
</div>

<h3>裡面的 block-level box 太寬</h3>
<div class="containing-block">
  <div class="inner box-too-wide">block-level box is too wide</div>
</div>

<h3>內容太高</h3>
<div class="containing-block">
  <div class="inner height-exceeds">element's height exceeds</div>
</div>

<h3>絕對定位</h3>
<div class="containing-block">
  <div class="inner absolute">absolute</div>
</div>

<h3>margin 設為負值</h3>
<div class="containing-block">
  <div class="inner negative-margins">negative margins</div>
</div>

<h3>text-indent 屬性讓第一行 text 縮排超出</h3>
<div class="containing-block">
  <div class="inner text-indent">'text-indent' property</div>
</div>
.containing-block {
  width: 200px;
  height: 40px;
  outline: 2px solid;
  background-color: lightgray;
}
.inner {
  background-color: #8bf;
}
.not-wrap {
  white-space: nowrap;
}
.box-too-wide {
  width: 250px;
  height: 30px;
}
.height-exceeds {
  height: 60px;
}
.absolute {
  position: absolute;
  left: 190px;
  width: 60px;
  height: 30px;
}
.negative-margins {
  margin-right: -50px;
}
.text-indent {
  text-indent: 11.5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.