[Solved]-How do you set the text-overflow property of a highcharts-legend-item to ellipsis in styled mode?-Highcharts

You can add a labelFormatter function to your label which will truncate the legend name and add a title element (which provides the tool tip) to the legend text. It's a hacky solution with setTimeout to wait for the chart to render but it works:

labelFormatter: function() {
    var cut = 5,
        fullName = this.name;
    if (this.name.length > cut) {
      setTimeout(function() {
        let child = document.createElementNS("http://www.w3.org/2000/svg",'title');
        child.innerHTML = fullName;
        document.querySelector(".highcharts-legend-item.highcharts-series-" + 
                               this.index).childNodes[0].appendChild(child);
      //if you have more then 1 chart at the page 
      //then you'll need to add the container id to the querySelector
      }.bind(this),200)
      return this.name.substr(0, cut) + "...";
    }
    return this.name;
  }

JSFiddle

EDIT: Based on Kamil Kulig's solution I've made a much shorter and less hacky solution using a wrapper function:

(function(H) {
  var old_buildText = H.SVGRenderer.prototype.buildText;
  H.SVGRenderer.prototype.buildText = function(wrapper) {
    wrapper.styles = wrapper.styles || {};
    wrapper.styles.textOverflow = 'ellipsis';
    old_buildText.call(this, wrapper);
    }
})(Highcharts);

JSFiddle