CSS: hiding text when it's overflow

Use the following CSS to hide the text. This piece of CSS will hide the exceeded part and replace with some "..." instead.

.nowrap{
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

This will work with both fixed width and percentage width. See the sample below:

The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.

The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.

But sometime it doesn't work. I encountered several problems when using it. So I list the problems here just in case somebody got the problem.

• "text-overflow" will only apply to its PLAIN text child elements.
  The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.

  The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.
• "text-overflow" will not apply to "table" element.

  The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.