Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

text-overflow:ellipsis with MathJax?

text-overflow:ellipsis with MathJax?

Problem

Is it possible to get text-overflow:ellipsis to work with MathJax?

Here is a (non-working) example (on JSFiddle)

The HTML:


\[ \text{2014-01-05} \quad \begin{cases} \text{Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum} \\ \text{Lorem ipsum} \\ \text{Lorem ipsum} \\ \end{cases} \]
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

And the CSS:

#test{
    display: inline-block;
    width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

As you can see, text-overflow:ellipsis works for the div without any MathJax content but not for the div with MathJax content. Is there any solution or workaround?

Problem courtesy of: Adam Liter

Solution

There is currently no way of making this work.

While the MathML spec provides two comparable values for overflow -- truncate and elide -- neither one is implemented in MathJax yet.

On the bright side, linebreaking is supported for display-style mathematics.


Addendum: some restrictions apply. Not all linebreaking methods are supported; in particular, linebreaking within token elements and some alignment options are not supported.

Solution courtesy of: Peter Krautzberger

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

text-overflow:ellipsis with MathJax?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×