<!DOCTYPE html>
<style>
div {
  font: 20px/1 Ahem;
}

#red {
  position: absolute;
  z-index: -1;
  background: red;
  color: transparent;
}

.test {
  width: 200px;
  color: green;
  background-color: green;
}
.normal {
  white-space: normal;
}
.nowrap {
  white-space: nowrap;
}
</style>
<!-- white-space: normal allows wrapping at the overflowing whitespace content -->
<div id=red>XXXXXXXXXX<br>X</div>
<div class="test nowrap"><span class="nowrap">XXXXXXXXXX </span><span class="normal"> </span> X</span></div>