how to wrap text based on width of the column

Question

hi i have a table with diffrent column widths like below

${"#goldBarList"} table tr td:first-child{width:5%;}
${"#goldBarList"} table tr td:first-child+td{width:5%;}
${"#goldBarList"} table tr td:first-child+td+td{width:6%;}
${"#goldBarList"} table tr td:first-child+td+td+td{width:7%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td{width:7%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr td:first-child+td+td+td+td+td+td+td+td+td+td{width:11%;}
${"#goldBarList"} table tr:first-child{read-only:true; font-size:90%; font-weight:bold;

}

i used

${"#goldBarList"} table{
table-layout:fixed;
word-wrap:break-word;
}

to make the table fixed and to wrap the text in the cells. But the problem is it is not wrapping the text based on the width of the column. Means for 5% width and for 11% width it is wrapping text wider than 8 characters. But i want to wrap the text based on column width. How to do this..?

Answer 1

If you want to Wrap the text in javascript,

var getFormattedString  = function (str, length){
    if(str == null || str == '') return '';
    return (str.length>length)?(str.substr(0,length) + "...") : str;
}

Call the above function like following.

var name = "This is the long long long text";
$(selector).attr('title', name).html(getFormattedString (name, 10));

Where title attribute of the lement will display the default tooltip.