When applying truncation, place the full text in a title attribute so that it’s accessible on hover.
Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18!
<dl class="joy-size--1-of-2">
<dt class="joy-text-title--caps">Checkout these great games:</dt>
<dd>
<p class="joy-truncate" title="Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18!">Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18!</p>
</dd>
</dl><ul>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--25">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem"><a href="javascript:void(0);">Anthem</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 42 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--25">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name"><a href="javascript:void(0);">Anthem, A Way Out, and Star Wars Battlefront 2</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 40 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--25">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 37 more</span>
</li>
</ul><ul>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--33">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem"><a href="javascript:void(0);">Anthem</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 42 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--33">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name"><a href="javascript:void(0);">Anthem, A Way Out, and Star Wars Battlefront 2</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 40 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--33">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 37 more</span>
</li>
</ul><ul>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--50">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem"><a href="javascript:void(0);">Anthem</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 42 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--50">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name"><a href="javascript:void(0);">Anthem, A Way Out, and Star Wars Battlefront 2</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 40 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--50">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 37 more</span>
</li>
</ul><ul>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--66">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem"><a href="javascript:void(0);">Anthem</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 42 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--66">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name"><a href="javascript:void(0);">Anthem, A Way Out, and Star Wars Battlefront 2</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 40 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--66">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 37 more</span>
</li>
</ul><ul>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--75">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem"><a href="javascript:void(0);">Anthem</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 42 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--75">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name"><a href="javascript:void(0);">Anthem, A Way Out, and Star Wars Battlefront 2</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 40 more</span>
</li>
<li class="joy-list__item joy-m-right--large joy-grid joy-truncate_container--75">
<span>Library:</span>
<span class="joy-m-left--xx-small joy-truncate" title="Anthem with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Anthem, A Way Out, Star Wars Battlefront 2, Mass Effect: Andromeda, Battlefield 1, and FIFA 18</a></span>
<span class="joy-m-left--xx-small joy-no-flex"> + 37 more</span>
</li>
</ul>