The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.

We’ll start by adding a class “.ellipsis” to the p tag and building it by example. Add white-space: nowrap, to limit the paragraph to a single line, and overflow: hidden keeps it from making the browser window wider. We then add width: 300px to limit the size (IE6 needs a width defined, even if it’s 100%) and begin constructing our label. Also, first recommended for CSS3 back in 2003[1], the CSS Text Module includes support for text-overflow: ellipsis. So putting that all together:

One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links , the actual ‘clickable’ area should be as large as possible.