Two sentences of CSS perfectly truncate the sidebar's latest comments list.

The common sidebar latest comments list usually comes in two formats: "Person A commented on a certain article," or "Person B: excerpt...". The problem with both is that line breaks are hard to control, the lengths vary, and sometimes the content can even break the page layout. After studying the CSS manual for a long time, I found a standards-compliant method that forces the display to only one line, cutting off any overflow—just like the preview text in Gmail. The method is quite simple. For example, my sidebar widget is ``, and I want to truncate the `` elements inside it. You can use the following CSS to force no wrapping and hide any overflowing content:

```css

.widget li {

white-space: nowrap; /* Prevents text from wrapping */

overflow: hidden; /* Hides any overflowing content */

text-overflow: ellipsis; /* Adds an ellipsis (...) where the text is cut off */

max-width: 100%; /* Ensures the element stays within its container */

}

```

This way, the text will be truncated neatly with an ellipsis if it exceeds the width of the container, just like how Gmail handles previews.