<style>
div {
  font-family: Ahem;
  font-size: 20px;
  width: 20px;
  word-break: break-word;
  color: green;
}
.first span {
  padding: 10px
}
.second span {
  padding: 20px
}
.third span {
  padding: 30px
}
.forth span {
  padding: 40px
}
</style>
<div class=first><span><span><span><span>XX</span></span></span></span></div>
<div class=second><span><span><span><span>XX</span></span></span></span></div>
<div class=third><span>X<span>X<span>X<span>XX</span></span></span></span></div>
<div class=forth><span>X<span>X<span>X<span>XX</span>X</span>X</span>X</span></div>