overflow: hidden;は要素のボックスに収まりきらない内容（はみ出す内容）の表示方法を制御します。デフォルトはvisibleになっててはみ出す内容も表示されます。
.box {
width: 150px;
height: 50px;
border: 1px solid black;
}
overflow:hidden;を追加すると本来はみ出してしまうテキストが非表示になります。
.box {
width: 150px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
一見するとそれが何？という感じではありますが、
overflow:hidden;は特定のデザイン効果を達成するためや、浮動要素のクリアなど、他の目的で使用されることもあり、非常に便利です。