Example 1. Starting with the text
With no width restrictions, and no ellipsis, this paragraph (<p> tag) displays as one would expect…a big block of text. We’ve given it a some visual treatment to distinguish it as an interface element in these examples:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
But that’s not what we want. We’re looking for a single line, the sizing of which we can control in our interface.
Example 2. Prevent line wrap and bring on the ellipsis!
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:
1
2
3
4
5
6
7
8
9
| .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}p.block { width: 300px;} |
And if it were as simple as that, this article wouldn’t be necessary. While the text-overflow: ellipsisproperty is supported in Internet Explorers 6 & 7, Safari 3 & 4, Chrome 1 &2, it requires special handling for IE 8 Standards Mode, Opera, and FireFox. [2]
Example 3. text-overflow in Opera and IE 8
Opera’s developers recognize that the text-overflow property isn’t part of the official spec yet, and distinguishes it as a proprietary property through the use of the -o prefix. Microsoft introduced something similar in IE 8 with the -ms prefix. So let’s add that:
1
2
3
4
5
6
7
| .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;} |
Alright, alright, no more teasing. On to the goods. Let’s deal with the 400 lb. fox in the room.
Example 4. Making it work in FireFox
While implementation of the text-overflow property in FireFox is in development[3], it has been "in development" for a long time. But FireFox does support XUL, Mozilla’s XML User Interface Language[4]. While it may be the first time you’ve heard about it, many of the popular FireFox add-ons are written in, or rely on, XUL. XUL has a crop property for the description element, which specifies "An ellipsis will be used in place of the cropped text" [5].
And this is where Rikkert Koppes, a developer in The Netherlands, figured out how to put it all together[6]. Firefox’s support for XBL (XML Binding Language) allows us to "associate elements in a document with script, event handlers, CSS, and more complex content models, which can be stored in another document"[7]. So in this case, the other document is going to be our XUL description element with tail truncation (crop), which by default in XUL will have ellipsis, and the association will be through FireFox’s support of XBL bindings in CSS. First, we’ll create the XUL, which should be saved as ellipsis.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?xml version="1.0"?><bindings> <binding id="ellipsis"> <content> <xul:window> <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> </xul:window> </content> </binding></bindings> |
At Mint.com, we store this alongside our CSS directory in a folder named xml. You may wish to do the same. Then we tell our FireFox-only (-moz prefix) CSS to bind the .ellipsis class to the XUL:Description element’s described behavior, referenced by a unique ID (that binding id="ellipsis") in the XML code above:
1
2
3
4
5
6
7
| .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>);} |
Success! If you don’t see it working on your site, double-check your path to the XML document in the CSS declaration.
ReplyDeleteشركة تنظيف بالجبيل شركة تنظيف بالجبيل
شركة تسليك مجاري بالاحساء شركة تسليك مجاري بالاحساء
شركة تنظيف بالخبر شركة تنظيف بالخبر
افضل شركة نقل عفش بالاحساء افضل شركة نقل عفش بالاحساء
شركة كشف تسربات المياه بالاحساء شركة كشف تسربات المياه بالحساء
___
افضل شركة غسيل خزانات بجدة افضل شركة غسيل خزانات بجدة
شركة عزل خزانات المياه بالرياض شركة عزل خزانات المياه بالرياض
شركة تنظيف منازل بجدة بالبخار شركة تنظيف منازل بجدة بالبخار
شركة مكافحة حشرات بمكة شركة مكافحة حشرات بمكة
ارخص شركة نقل عفش بالدمام ارخص شركة نقل عفش بالدمام