title: jqplot axis tick labels with ellipsis
body: <p>I have an app that creates several charts using <code>jqplot</code>.</p>
  
  <p>Here is an example of one of the charts I'm having trouble with:</p>
  
  <p><img src="https://i.stack.imgur.com/fh1oe.png" alt="Chart Screenshot"></p>
  
  <p>As you can see some of the tick labels are quite long and causing the chart to render incorrectly.  I am using <code>$.jqplot.CanvasAxisTickRenderer</code> in order to rotate the tick labels as shown so I don't think I can style the tick label text using CSS.  Is there a way I can shorten the tick label text using CSS or a formatter.</p>
  
  <p>I'm looking for an effect that simply shortens the text and adds an ellipsis similar to the <code>text-overflow : ellipsis</code> CSS style.</p>
  
  <p><strong>Edit:</strong>:</p>
  
  <p>Here is a new screenshot after trying the css method.</p>
  
  <p><img src="https://i.stack.imgur.com/JflnX.png" alt="Chart Screenshot2"></p>
  
  <p>As you can see, the absolutely positioned tick labels don't quite line up with the bars they represent and they go outside the parent container.  The css method provided in the answer used a 90 degree rotation, but I would prefer the 60 degree rotation, which causes the labels to not line up with their respective bars.</p>