DataTables Combo box width - html

Question

I'm applying DataTables
to utilize filtering, sorting and pagination on my HTML table. I'm using the following code to apply these attributes to the table:
$(document).ready(function() {
<!-- Sorting and pagination -->
var oTable = $('#mainTable').dataTable( {
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
<!-- Filtering -->
$("thead td").each( function ( i ) {
<!-- Create and populate combo boxes -->
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
<!-- Filter data when selection changes -->
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
});
});
});
On the function call:
fnCreateSelect( oTable.fnGetColumnData(i));
..the combo boxes are filled with the data from the table. However, the boxes are automatically sized to contain the full length of the values (some of which span many lines) and so the columns are sized too big and run way off the page. I've determined it's not a CSS issue, so what I need is a way to make the combo boxes use multiple lines per entry, or only show a portion of the value so that I can fit all these columns on one page.
Thanks in advance!

Answer 1

Answer for anyone following this:
I changed the code in fnCreateSelect (where the combo boxes are built) to limit how much text is stored per value in the combo boxes as such:
function fnCreateSelect(aData) {
var r = '<select><option value=""></option>', i, iLen = aData.length;
for (i = 0; i < iLen; i++) {
// If string is a URL, handle it accordingly
if (aData[i].indexOf("href") != -1) {
var url = aData[i].substring(aData[i].indexOf('http'), aData[i].indexOf('">'));
r += '<option title="' + url + '" value="' + url + '">' + url.substring(0, 25);
if (url.length > 25)
r += '...';
}
else {
r += '<option title="' + aData[i] + '" value="' + aData[i] + '">' + aData[i].substring(0, 40)
if (aData[i].length > 40)
r += '...';
}
r += '</option>';
}
return r + '</select>';
}