Two-sentence CSS Perfect truncated sidebar latest comment list

The common sidebar of the latest comment list generally has two formats: passers-by a published in a certain article, or passers-by B: introduction ... They all have a problem, that is, it is difficult to control the line, the length is different, sometimes the content will break the page. Old fertilizer research for a long time CSS manual, found a way to meet the standard, like now my sidebar widget, forced to show only one line, more than a knife cut off, is not a bit like Gmail inside the preview text? The method is very simple, such as my sidebar widget is

truncation, then use the following CSS to force no line break, overflow part of the hidden:

.widget li {
white-space: nowrap;
overflow: hidden;
}

Depending on the properties of its parent container, under IE may not be truncated, then the above two sentences followed by a width definition can be. If you don't like a word that is cut in half, or if you want to show more than one line of quotes, you can do this:

.widget li {
height: 3.6em;
overflow: hidden;
}

Here is a truncation of the overflow portion for each

limit height. EM is a relative unit, debug the selection of a suitable value, a row of two lines can be achieved, like the following figure 1. or use max-height instead of height, compatibility Tenkau. Need to last with an ellipsis, you can try Text-overflow:ellipsis; is a non-standard attribute, I have not tried, do not know how to use.

Figure 1 Effect of truncated sidebar

Here is the overflow portion truncated for each specified height. EM is a relative unit, debug the selection of a suitable value, a row of two lines can be implemented, like the following figure. or use max-height instead of height, compatibility Tenkau. Need to last with an ellipsis, you can try Text-overflow:ellipsis; is not a standard attribute.