JSFiddle - React, Tailwind, and code Playground

HTML

I want to achive such a word wrap:
<div class="wrap border">
Unternehmens kunde
</div>

And no white space when there is no wrap:
<div class="no-wrap border">
Unternehmenskunde
</div>

<p>
display: none;
</p>
<div class="wrap border">
Unternehmens<span class="display-none"> </span>kunde
</div>

<div class="no-wrap border">
Unternehmens<span class="display-none"> </span>kunde
</div>

<p>
max-width: 0;
</p>
<div class="wrap border">
Unternehmens<span class="no-width"> </span>kunde
</div>
<div class="no-wrap border">
Unternehmens<span class="no-width"> </span>kunde
</div>

<p>
two spans
</p>
<div class="wrap border">
<span>Unternehmens</span><span>kunde</span>
</div>
<div class="no-wrap border">
<span>Unternehmens</span><span>kunde</span>
</div>

CSS

.border {
  border: 1px solid red;
}

.wrap {
  width: 115px;
  word-wrap: break-word;
}

.no-wrap {
  width: 150px;
  word-wrap: break-word;
}

.display-none {
  display: none;
}

.no-width {
  max-width: 0;
  width: 0;
}