JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
<tr>
<td></td>
<th>none</th>
<th>manual</th>
<th>auto</th>
</tr>
</thead>
<tbody>
<tr>
<th>U+002D <small>hyphen-minus</small></th>
<td><p class="example none">The long-term effects</p></td>
<td><p class="example manual">The long-term effects</p></td>
<td><p class="example auto">The long-term effects</p></td>
</tr>
<tr>
<th>U+2010 <small>hyphen</small></th>
<td><p class="example none">The long&#x2010;term effects</p></td>
<td><p class="example manual">The long&#x2010;term effects</p></td>
<td><p class="example auto">The long&#x2010;term effects</p></td>
</tr>
<tr>
<th>U+2011 <small>non-breaking hyphen</small></th>
<td><p class="example none">The long&#x2011;term effects</p></td>
<td><p class="example manual">The long&#x2011;term effects</p></td>
<td><p class="example auto">The long&#x2011;term effects</p></td>
</tr>
<tr>
<th>U+002D &amp; &lt;nobr></th>
<td><p class="example none">The <nobr>long-term</nobr> effects</p></td>
<td><p class="example manual">The <nobr>long-term</nobr> effects</p></td>
<td><p class="example auto">The <nobr>long-term</nobr> effects</p></td>
</tr>
</tbody>
</table>

CSS

table { border-spacing: 0.5em; }
td, th { width: 6em; text-align: left; vertical-align: top; }
th small { display: block; font-weight: normal; font-variant: small-caps; }
p { margin: 0; }
.example { width: 5em; background: #f4f4f4; }

.none   { hyphens: none; }
.manual { hyphens: manual; }
.auto   { hyphens: auto; }