/**********************************************************
/*                       CSS                              *
/*********************************************************/
.square
{
  position: relative;
  width: 50%;
  background-color: red;
}
.square:after
{
  content: "";
  display: block;
  padding-bottom: 100%;
}
.content
{
  position: absolute;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
}
/*========================================================/
/                        CSS                              /
/========================================================*/

/**********************************************************
/*                       HTML                             *
/*********************************************************/
<div class="square">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Cumque ratione, culpa repudiandae sunt deleniti quisquam fugiat eius!
    Possimus animi, corporis voluptate distinctio, accusantium obcaecati quaerat quia consequuntur sint ipsam, sed.
  </div>
</div>
/*========================================================/
/                        HTML                             /
/========================================================*/