title: hide certain string of text and replace with ellipsis - show on hover
body: <p>I have a menu with some content that our client hasn't added yet, here's an example of one menu:</p>
  
  <pre><code>**CLINICAL MATERIALS – NUTRAFUSE**
  Clinical Studies &amp; Articles – Coming Soon
  Counseling Sheets – Coming Soon
  Prescriber’s Guide – Coming Soon
  Rx Pads/Order Forms – Coming Soon
  Webinars – Coming Soon
  </code></pre>
  
  <p>I would like it to appear like this.</p>
  
  <pre><code>**CLINICAL MATERIALS – NUTRAFUSE**
  Clinical Studies &amp; Articles...
  Counseling Sheets...
  Prescriber’s Guide...
  Rx Pads/Order Forms...
  Webinars...
  </code></pre>
  
  <p>and show the original when an item is hovered over
  i think there's a way to truncate the text starting from the back using just css, but i'm not entirely sure. might need jquery.</p>
  
  <p>thanks for help in advance!</p>
  
  <p>EDIT</p>
  
  <p>if anyone who answers could make a fiddle if using jquery because i'm still not that great with java of any kind</p>
  
  <p><strong>EDIT with code</strong>
  HTML</p>
  
  <pre><code>&lt;div class="widget_nav_menu"&gt;&lt;h3&gt;Clinical Materials&lt;/h3&gt;
  &lt;div class="materials"&gt;
  &lt;ul class="sub-menu"&gt;
  &lt;li&gt;&lt;a&gt;&lt;a&gt;link1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;a&gt;link2 - Coming Soon&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;a&gt;link3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;a&gt;link4 - Coming Soon&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;a&gt;link5 - Coming Soon&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;a&gt;link6 - Coming Soon&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>there isn't any javascript or css that pertains with what i'm needing to do</p>
  
  <p><strong>EDIT</strong> much simpler solution for this issue. I deleted " - coming soon" from all my menu items in the wordpress dashboard, then used this to switch between the two</p>
  
  <pre><code>.coming-soon:after {
  content: '...';
  }
  .coming-soon:hover:after {
  content:' - Coming Soon'
  }
  </code></pre>
  
  <p>Thanks for the help everyone!</p>