CSS control does not overflow, do not wrap, overflow part of the ellipsis display __CSS

White-space:nowrap;text-overflow:ellipsis; Overflow:hidden;

Text-overflow:clip | Ellipsis
Take value:
Clip: Default value. Do not display ellipsis (...), but simple trimming
Ellipsis: Displays an ellipsis (...) when text in an object overflows.

White-space:normal | Pre | NoWrap Value:
Normal: Default value. The default processing method. Text is automatically processed for line wrapping. If you reach the container boundary, the content will go to the next line
Pre: newline and other whitespace characters will be protected. This value needs ie6+ or! DOCTYPE declared as Standards-compliant mode support. If! DOCTYPE declaration is not specified as Standards-compliant mode, this property is available, but does not work. The result is equivalent to normal. See Pre Object
NoWrap: Forces all text to be displayed in the same line until the text ends or the BR object is encountered. See NoWrap Properties

overflow:visible | Auto | Hidden | Scroll
Take value:
Visible: Default value. does not cut content nor does it add scroll bars. If you explicitly declare this default value, the object will be trimmed with the size of the window or frame that contains the object. and the Clip property setting will fail
Auto: Object content is trimmed or scroll bar is displayed when required
Hidden: Do not display content that exceeds the object size
Scroll: Always show scroll bars

Turn: http://blog.163.com/amy0713@126/blog/static/1370485372011656210202/

Another source introduction:

div+css Set text over width does not wrap and does not display

When a line of text exceeds the width of a div or table, the default in the browser is to allow it to be wrapped, if we don't want him to change lines show that how to do it. It is easy to see the title of truncated text plus "...".

General text truncation (for inline and block):
==============css================
. text-overflow{
display:block;/* inline object need to add * *
Width:31em;
word-break:keep-all;/* do not change line * *
white-space:nowrap;/* do not change line * *
Hide the contents of the overflow:hidden;/* when the content is out of width * *
text-overflow:ellipsis;/* displays an ellipsis (...) when text overflows within an object, and is required to be used with Overflow:hidden. */
}
=================================

For a table, the definition is a little different:
==============css================
table{
Width:30em;
table-layout:fixed;/* only the layout algorithm that defines a table is fixed, the following TD definition can work. */
}
td{
width:100%;
word-break:keep-all;/* do not change line * *
white-space:nowrap;/* do not change line * *
Hide the contents of the overflow:hidden;/* when the content is out of width * *
text-overflow:ellipsis;/* displays an ellipsis (...) when text overflows within an object, and is required to be used with Overflow:hidden. */
}
=================================

Note: This dongdong only works on a single line of text, and if you want to use it on multiple lines, only the first row will work. This writing only IE will have "...", other browser text outside the specified width will be hidden.

Turn from: http://blog.csdn.net/herb777/article/details/7652343