长长度字符串未在图表中正确显示

In the javascript code under the function highcharts.chart i have given the json code as xAxis: { categories:["jasrajsinghbediisthebest"]} .The string jasrajsinghbediisthebest is not appearing correctly in the chart due to its large length . I want that the chart should display long strings.I dont want to change the size of the div ,it should remain at 400px.

js code:

$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
    xAxis: {
    //  xAxis data format :["x","y","z"]
        categories:["jasrajsinghbediisthebest"]
    },
    chart: {
        renderTo: 'container',
        type: 'column',
        margin: 75,
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Chart rotation demo'
    },
    subtitle: {
        text: 'Test options by dragging the sliders below'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
function showValues() {
    $('#R0-value').html(chart.options.chart.options3d.alpha);
    $('#R1-value').html(chart.options.chart.options3d.beta);
}

// Activate the sliders
$('#R0').on('change', function () {
    chart.options.chart.options3d.alpha = this.value;
    showValues();
    chart.redraw(false);
});
$('#R1').on('change', function () {
    chart.options.chart.options3d.beta = this.value;
    showValues();
    chart.redraw(false);
});

showValues();
});

html code:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<div id="sliders">
    <table>
        <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0"        max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
        <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
    </table>
</div>

css code:

#container, #sliders {
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
#container {
    height: 400px; 
}

use overflow none in your labels :

labels: { 
align: 'left',  
style: { 
    textOverflow:'none', 
    whiteSpace: 'nowrap' 
  } 
 }

You need to set width of label and then set useHTML as true. Last step is apply CSS styles.

xAxis: {
        //  xAxis data format :["x","y","z"]
        categories: ["jasrajsinghbediisthebest"],
        labels: {
            useHTML:true,
            style: {
            }
        }
    },

CSS

.highcharts-xaxis-labels span {
    word-break:break-all!important;
    white-space: normal!important;
}

Example: http://jsfiddle.net/ta2pLb3v/1/