text-overflow:ellipsis in Firefox. Pure CSS solution.

by Admin 28. February 2009 02:57

"Having the ability to chop long lines of text at the edge of a content area and show three dots to indicate there is some missing."

http://www.css3.info/preview/text-overflow/ 

While it's something that IE6 has been able to do since the 90s and most other browsers now support, Firefox has still been lacking in this area for some time.

Obviously you can trim the text on the server before sending it to the client but you cannot guarantee which font or indeed which font-size the user is using so this will always be a best guess not a science.

I've seen a few reasonable attempts at solving this over the years but none have ever come quite as close as this one to being workable. 

Firefox *should* be able to do this easily. After all, the tabs often contain an ellipsis when the page title is too long.

This solution is actually a cleaned up version of HedgerWow's script based XUL solution and a pure CSS delivery method by Rikkert Koppes.

To get it working normally first...

.ellipsis
{
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

 ...to get it working in firefox as well, you will also need to do this...

.ellipsis
{
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 -moz-binding: url('ellipsis.xml#ellipsis');
}

Where ellipsis.xml is a  

<?xml version="1.0"?><bindings xmlns="http://www.mozilla.org/xbl"xmlns:xbl="http://www.mozilla.org/xbl"xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <binding id="ellipsis">
  <content>
   <xul:window>
    <xul:description crop="end" xbl:inherits="value=xbl:text">
     <children/>
    </xul:description>
   </xul:window>
  </content>
 </binding>
</bindings>

Known issues:

This solution doesn't work for innerHTML, only innerText.

The text cannot be selected by the user.

A tooltip should in theory be possible but I haven't looked into this fully yet.

 

Sources: 

http://www.rikkertkoppes.com/thoughts/2008/6/ 

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Welcome to BlogEngine.NET 1.4

by admin 29. June 2008 00:00

If you see this post it means that BlogEngine.NET 1.4 is running and the hard part of creating your own blog is done. There is only a few things left to do.

Write Permissions

To be able to log in to the blog and writing posts, you need to enable write permissions on the App_Data folder. If you’re blog is hosted at a hosting provider, you can either log into your account’s admin page or call the support. You need write permissions on the App_Data folder because all posts, comments, and blog attachments are saved as XML files and placed in the App_Data folder. 

If you wish to use a database to to store your blog data, we still encourage you to enable this write access for an images you may wish to store for your blog posts.  If you are interested in using Microsoft SQL Server, MySQL, VistaDB, or other databases, please see the BlogEngine wiki to get started.

Security

When you've got write permissions to the App_Data folder, you need to change the username and password. Find the sign-in link located either at the bottom or top of the page depending on your current theme and click it. Now enter "admin" in both the username and password fields and click the button. You will now see an admin menu appear. It has a link to the "Users" admin page. From there you can change the username and password.  Passwords are hashed by default so if you lose your password, please see the BlogEngine wiki for information on recovery.

Configuration and Profile

Now that you have your blog secured, take a look through the settings and give your new blog a title.  BlogEngine.NET 1.4 is set up to take full advantage of of many semantic formats and technologies such as FOAF, SIOC and APML. It means that the content stored in your BlogEngine.NET installation will be fully portable and auto-discoverable.  Be sure to fill in your author profile to take better advantage of this.

Themes and Widgets

One last thing to consider is customizing the look of your blog.  We have a few themes available right out of the box including two fully setup to use our new widget framework.  The widget framework allows drop and drag placement on your side bar as well as editing and configuration right in the widget while you are logged in.  Be sure to check out our home page for more theme choices and downloadable widgets to add to your blog.

On the web

You can find BlogEngine.NET on the official website. Here you'll find tutorials, documentation, tips and tricks and much more. The ongoing development of BlogEngine.NET can be followed at CodePlex where the daily builds will be published for anyone to download.

Good luck and happy writing.

The BlogEngine.NET team

Currently rated 4.4 by 3 people

  • Currently 4.4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Powered by BlogEngine.NET 1.4.0.0