Web Design applications: Using CSS word-cutting

css| Design | Web page design

The word truncation is a disgusting question. In order to take care of performance needs, it is often necessary to cut short sentences that are too long, such as a headline in a list.

This is usually handled by programmers using background technology (a variety of popular languages, PHP, JSP, etc.) or foreground technology (JAVASCRIPT). I am personally inclined to use the foreground technology, because it is good for improving the affinity of Web pages (accessibility). In a non-desktop browser, users can more easily grasp the integrity of information.

Text-overflow is a property of CSS3 that truncates a long string and determines how the truncated part is displayed based on the value. At present, IE has implemented its support, opera also has a private attribute (-o-text-overflow) to its support, Firefox seems to be a step behind ... Both can be supported using the ellipsis value, replacing the truncated part with an ellipsis (i.e., ellipsis).

So, all you have to do is to set the width of the elements that need to be truncated and use them together with overflow to achieve the effect.

But Firefox doesn't support it, so you probably know what I'm going to do next. :)

First you can look at Yahoo some Daniel's solution: http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?p=120. Daniel is Daniel, XBL and JavaScript are two-pronged.

Then, my solution is to use the pseudo class: After adding the ellipsis, and then positioning it to the right. The effect is a bit rough, but simple and clear, pure CSS implementation.

The specific process does not say, look at the case, interested people look at the source code, it is easy to understand.