Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Provide a height for your DIV, then use the <code>text-overflow: ellipsis</code> and prevent line-wrap CSS approach.</p> <p>Here's a simple example:</p> <pre><code>.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; } </code></pre> <p>Of course, there's always somebody making trouble, and this time it's Firefox. You have to bind a file to the CSS.</p> <p>It's easier than you might think. Just create a new text file, and call it ellipsis.xml. Then stick it anywhere on your web server where you can reference it.</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;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"&gt; &lt;binding id="ellipsis"&gt; &lt;content&gt; &lt;xul:window&gt; &lt;xul:description crop="end" xbl:inherits="value=xbl:text"&gt;&lt;children/&gt; &lt;/xul:description&gt; &lt;/xul:window&gt; &lt;/content&gt; &lt;/binding&gt; &lt;/bindings&gt; </code></pre> <p>Then in your CSS, do this:</p> <pre><code>.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); } </code></pre> <p>That's the quick run-down, and for more information check out this guy:</p> <p><a href="http://mattsnider.com/css/css-string-truncation-with-ellipsis/" rel="nofollow">http://mattsnider.com/css/css-string-truncation-with-ellipsis/</a></p> <p>BTW: If you think the threedots plugin is an easier choice, I say go for it.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload