Есть таблица, в низу которой располагается кнопка,при каждом нажатии на которой уменьшается ширина первого столбца на 10 px. Все нормально, но мне нужно, чтобы при маленькой ширине столбца, находящийся внутри текст разрывался в словах и переносился. Ставлю для ячейки word-wrap: break-word, но это не помогает, все равно минимальная ширина ячейки это самое блинное слово.
Подскажите как сделать так, чтобы длинные слова разрвались и переносились? Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
table
{
border-collapse: collapse;
}
table td
{
border: 1px solid black;
vertical-align:top;
padding: 1px;
WORD-WRAP:break-word;
}
</style>
<script type="text/javascript">
function changeSize()
{
var cell = document.getElementsByTagName('TD')[0];
var cellWidth = parseInt(cell.width);
if(cellWidth > 10)
cell.setAttribute('width',cellWidth - 10);
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<td width='300px'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at,
adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut
lorem vitae turpis porttitor tempor.
</td>
<td width='300px'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at,
adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut
lorem vitae turpis porttitor tempor.
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at,
adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut
lorem vitae turpis porttitor tempor.
</td>
<td>asdaasdsadasd</td>
</tr>
</table>
<p>
<input type="button" value="-10px" onclick="changeSize()">
</p>
</body>
</html>