Search code examples
mathjaxcss

text-overflow:ellipsis with MathJax?

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

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

The HTML:

<!doctype html>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div id="test">
\[
\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}
\]
</div>

<div id="test">
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
</div>

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?

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.