Highchart axis labels are wrapped (there is no proper ellipsis) - highcharts

Question

When I use the highchart labels are not coming with the ellipsis style.
For that, I need to enter more texts to achieve that by default.
For example,
for the label text "Africa hi hello how are you. I am fine. thank you. what about you? how is going? Nothing special", it shows the ellipsis as "Africa hi hello how are yo.."
But if I remove "Nothing special" and having only the following sentence, "Africa hi hello how are you. I am fine. thank you. what about you? how is going?", then labels are wrapped instead of applying ellipsis.
I have tried the formatter, but the tooltip is not coming by default.
If I use, usehtml property the design gets collapsed.
Please see the following code.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa hi hello how are you. I am fine. thank you. what about you? ho?', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels:{
formatter: function () {
return this.value;
}, style: {
color: 'black',
overflow:'none'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
stacking:'normal',
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Answer 1

Notice that in the demo that you provided the look of the label depends on the size of the chart. Ellipsis is applied when the width is very small. Otherwise words of the label are wrapped.
Your example as live demo: http://jsfiddle.net/BlackLabel/c7f2oadg/
Use configuration similar to the below one if you want to be sure that ellipsis will always be applied to long labels:
style: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: 100,
}
width causes here that ellipsis will be used in all labels wider than 100 px.
Live demo: http://jsfiddle.net/BlackLabel/v213vwts/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.style