How to show “…” when there's not enough space to view all the text


Tags: css,text,jquery-mobile,space,css3

Problem :

How does jQueryMobile shows "..." when there's not enough space to view all the text?

Is it an CSS attribute?



Solution :

There is a CSS attribute for this -- it is text-overflow:ellipsis;.

However, there is one problem with it: it doesn't work in Firefox. It works in all other browsers, but not Firefox, not even FF4. I understand it's planned for FF5 or FF6.

In Firefox, it would need to be done using pure Javascript, which is where the JQuery would need to do some work. To do it accurately, it would need to calculate the physical size of the text in pixels, character by character. It is possible that it does use the CSS property in other browsers. It would make sense.

See this post: text-overflow:ellipsis in Firefox 4? for a further discussion of this issue specific to Firefox.


    CSS Howto..

    How can I make a fade in function without using jQuery like this? (JavaScript)

    How to utilize CSS only button markup?

    how to override unselectable=“on” with css in IE10?

    how to add a border-radius css curl

    How to change the style/css of a tooltip?

    How to create a image transition hover effect with css without breaking the grid layout

    Create dom elem on the fly or hide/show

    How to put six divs in two rows

    How do I vertically center my navigation bar?

    How to make elements appear under a
      in Firefox & IE8?

    Added ellipsis for long text but it showing below the text

    How to align
  • to the top when higher items are hidden via CSS
  • How to correctly redefine the CSS settings for FireFox?

    How to calculate effective CSS for a DOM node using PHP

    Menu hover effect - how to reproduce this effect?

    how to draw a configurable pie chart in css

    How to get a floating-DIV to fill available space within its parent DIV?

    how to position several div tags over each other

    How to remove top border for one element in a list

    How does ASP.NET generate HTML?

    Jquery Hashtag link system (show what page the user is on)

    How can I make a div *not* expand to fill it's parent?

    How to use numbers from a js file in the css sheet?

    How to position my embedded flash file

    How to change text color of a link inside jQuery accordion

    How to change the behavior of the following css button?

    How to check if css value is supported by the browser?

    How to make a smoother animation with jQuery UI slide effect

    how to do conditional css on table row?

    How can I show entered password using tooltip on input type=password in bootstrap?