title: Text overflow issue with highcharts
body: <p>I was wondering how to make the text in a highcharts legend clip or make an ellipsis after certain amount of characters. I know that I can set the legend style but not sure how to make it so that it works in this situation</p>
  
  <p><a href="http://jsfiddle.net/t96zj1yr/" rel="nofollow">http://jsfiddle.net/t96zj1yr/</a></p>
  
  <pre><code>'hidden',$(function () {
      $('#container').highcharts({
  
          chart: {
              marginBottom: 120,
              width: 500
          },
  
          legend: {
              itemWidth: 100,
              itemStyle: {
                  color: '#7CB57C',
                  fontWeight: 'bold',
                  width: '70px',
                  textOverflow: "ellipsis",
                  overflow: "hidden",
                  whiteSpace: "nowrap"
              },
              useHTML: true
          },
  
          series: [{
              data: [6, 4, 2],
              name: 'Firstasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf'
          }, {
              data: [7, 3, 2],
              name: 'Second'
          }, {
              data: [9, 4, 8],
              name: 'Third'
          }, {
              data: [1, 2, 6],
              name: 'Fourth'
          }, {
              data: [4, 6, 4],
              name: 'Fifth'
          }, {
              data: [1, 2, 7],
              name: 'Sixth'
          }, {
              data: [4, 2, 5],
              name: 'Seventh'
          }, {
              data: [8, 3, 2],
              name: 'Eighth'
          }, {
              data: [4, 5, 6],
              name: 'Ninth'
          }]
      });
  });
  </code></pre>
  
  <p>Any help would be appreciated!!
  Thank you</p>