Can't define cell height with word-wrap
<p>I would like make the table with auto word-wrap when it possible. I'm using <code>white-space: pre-line;</code> css-class property. But then cell height will be changed. See the picture. How can I fix row height to 28px? How can I forbid word-wrap, when cell doesn't have enough space?</p>

<p><a href="https://i.stack.imgur.com/b1ERN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1ERN.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 1px;
  background-color: #ddd;
  font-size: 14px;
}
tr {
  vertical-align: top;
}
td {
  box-sizing: border-box;
  position: relative;
  border-width: 0 0 1px 1px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  border-style: solid;
  border-color: #ffffff;
  height: 28px;
}
td div {
  overflow: hidden;
  white-space: pre-line;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 385px; height: 280px;"&gt;
  &lt;table&gt;
    &lt;col width="40" /&gt;
    &lt;col width="112" /&gt;
    &lt;col width="74" /&gt;
    &lt;col width="159" /&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="2" height="56"&gt;
        &lt;div&gt;&amp;lt;...&amp;gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="2" height="56"&gt;
        &lt;div&gt;Total:&lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;WordOne + WordTwo&lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Sum&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Logical&lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Count&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="25" height="700"&gt;
        &lt;div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="2" height="56"&gt;
        &lt;div&gt;&amp;lt;...&amp;gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;WordOne + WordTwo&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Sum&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Logical&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Count&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="2" height="56"&gt;
        &lt;div&gt;01.01.2000&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;WordOne + WordTwo&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Sum&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Logical&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Count&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="2" height="56"&gt;
        &lt;div&gt;01.01.2000 0:10:00&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;WordOne + WordTwo&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Sum&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Logical&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Count&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="2" height="56"&gt;
        &lt;div&gt;01.01.2000 0:20:00&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;WordOne + WordTwo&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Sum&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Logical&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="1" rowspan="1" height="28"&gt;
        &lt;div&gt;Count&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>