Sometimes when we do CSS on HTML elements. We may want to hide some text when the text in a specified box overflows. Usually, we can use a CSS property overflow:hidden to hide the text so that the format of the whole element will not be affected. But will it always work?
I believe some of us may encounter problems when we want to hide some text in a table td cell with specified width. If we use td { overflow:hidden;}, it is supposed to hide the text if the text in a td cell overflows. But the fact is that it will fail to work.The outcome will be the height of the td cell will increase so that the text can be contained in the td cell and visible. Then what should we do to hide text in a td cell? Following some tips :
1. When we use overflow property, we must set the height property of the container box to make sure the text will not wrap up in the container box. By default, the text will wrap up when the text length is larger than the container box width, so the height of the container box will automatically increase. So a height property must be set when use overflow property.
2, a td cell can not be used to hide text, it will always increase the height of td cell when the text overflows even if you set the overflow:hidden property on td cell. So to make the text hide in a td cell, we suggest that users use a div container in a td cell, then use the overflow property on the div container. This will help you hide the text when it overflows.
One example
//CSS Code
td div{
height:20px;
overflow:hidden;
}
//Html code
<table>
<tr><td><div> Some text here</div></td></tr>
</table>
Some text here
Hope this can help to solve your problem when you encounter problems to use overflow:hidden in td cells.
