How to Suppress Horizontal Scrollbar on Table - google-visualization

Question

I would like a Google Visualization Table with a fixed width and td cells that wrap. When I specify a width in the draw method a horizontal scroll bar appears. Rather than this, I want wrapping of cells.
This jsfiddle is a working example. In this example I would like for the first column to wrap. I have tried adding a class with word-wrap: break-word;. But this does not work.
Here is relevant js:
function drawChart() {
var cssClassNames = {
'tableCell': 'googlecell'
};
var datatable = new google.visualization.DataTable();
datatable.addColumn('string', 'Keyword', 'col1');
datatable.addColumn('number', 'Pageviews');
datatable.addColumn('number', 'Secs.');
datatable.addRows(3);
datatable.setCell(0, 0, '(not set)');
datatable.setCell(0, 1, 20308);
datatable.setCell(0, 2, 68.74);
datatable.setCell(1, 0, '(not provided)');
datatable.setCell(1, 1, 14410);
datatable.setCell(1, 2, 49.99);
datatable.setCell(2, 0, 'product_type_l1==sdsssijven&+product_type_l2==*');
datatable.setCell(2, 1, 3838);
datatable.setCell(2, 2, 48.35);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(datatable, {
showRowNumber: false,
'allowHtml': true,
'cssClassNames': cssClassNames,
width: 400
});
}
google.load("visualization", "1", {
packages: ["corechart", "table"]
});
google.setOnLoadCallback(drawChart);
And relevant css:
.googlecell {
word-wrap: break-word;
}

Answer 1

What about:
.googlecell {
word-break: break-all;
}
Is that what you are after? (demo)