JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<body>  
  
<div>
  <span>
    too much text for one line
  </span>
</div>
 
<br><br>
    
<table><tr><td>
  <span>
    too much text for one line
  </span>
</td></tr></table>
  
</body></html>

CSS

html, body, div, span, table, tr, td {margin:0; padding:0; border: 0}

div {
  width:200px;
  height:200px;
  line-height:200px;
  text-align:center;
}

span{
  line-height:normal;
  display:inline-block;
  width: 50%;
  vertical-align:middle;
  background-color: #f00;
}

table {
  width: 200px;
  height: 200px;
}

td { text-align:center;}

div, table { background-image: url(http://corsproxy.com/i.imgur.com/JKYdC.png); }