Don't use react-dot-dot-dot for facets

[ChristopherChudzicki]

Description/Context

Currently we use react-dot-dot-dot for facet text truncation. This has some downsides:

1. A dependency / bundle size: Not a big deal really, since we use it elsewhere (e.g., for card titles in MIT Open and OCW).
2. It doesn't seem to recalculate the truncation on window resize. (See screenshot below. Notice ... even though there's room for more text; the window was previously smaller, causing the truncation. You can see this in action at https://ocw.mit.edu/search, too.)
   
3. The HTML text is really truncated, not just visually. This affects screenreader labels.

   <div class="facet-label">
       <label for="department-15" class="facet-key">
           <div>Sloan School of Mana…</div>
       </label>
       <div class="facet-count">215</div>
   </div>

Plan/Design

IMO, it would be simpler to just use CSS text-overflow: ellipsis to truncate. That works well for single lines.