JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div>
  <blockquote>
    <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up</p>
    <cite>- Groucho Marx.</cite>
  </blockquote>
</div>
<br/><br/><br/><br/><br/><br/><br/>
<div style="width:100%;">
* A line cannot be broken, causing the line box to be wider than the block box.
不能折行，如 pre 元素或 no word-break时，导致行盒 line box比外层的块盒 block box更宽，而出现水平溢出时。
* A block-level box is too wide for the containing block. This may happen when an element's 'width' property has a value that causes the generated block box to spill over sides of the containing block.
块盒比它们的 containing block 更宽时。当块盒被设置了固定 width时会出现此情况。
* An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the ‘height' property, not by content height).
当一个元素的 height 超出了它的 containing block 的显式声明的 height 时。
* A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block

* A descendant box has negative margins, causing it to be positioned partly outside the box.

* The 'text-indent' property causes an inline box to hang off either the left or right edge of the block box.
</div>

CSS

div {
  width: 100px;
  height: 100px;
  border: thick solid red;
}

blockquote {
  width: 125px;
  height: 100px;
  margin-top: 50px;
  margin-left: 50px;
  border: thick dashed black
}

cite {
  display: block;
  text-align: right;
  border: none
}