Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I must say I'm a little disappointed that the only browser specific hack in my application is going to be to support FF4. The above javascript solution doesn't account for variable width fonts. Here is a more verbose script that accounts for this. The big problem with this solution is that if the element containing the text is hidden when the code is run then the width of the box isn't known. This was a deal breaker for me so I stopped working on/testing it... but I thought I'd post it here in case it is of use to someone. Be sure to test it well as my testing was less than exhaustive. I intended to add a browser check to only run the code for FF4 and let all the other browsers use their existing solution.</p> <p>This should be available for fiddling here: <a href="http://jsfiddle.net/kn9Qg/130/" rel="nofollow">http://jsfiddle.net/kn9Qg/130/</a></p> <p>HTML:</p> <pre class="lang-html prettyprint-override"><code>&lt;div id="test"&gt;hello World&lt;/div&gt; </code></pre> <p>CSS: </p> <pre class="lang-css prettyprint-override"><code>#test { margin-top: 20px; width: 68px; overflow: hidden; white-space: nowrap; border: 1px solid green; } </code></pre> <p>Javascript (uses jQuery)</p> <pre class="lang-javascript prettyprint-override"><code>function ellipsify($c){ // &lt;div $c&gt; content container (passed) // &lt;div $b&gt; bounds // &lt;div $o&gt; outer // &lt;span $i&gt; inner // &lt;/div&gt; // &lt;span $d&gt;&lt;/span&gt; dots // &lt;/div&gt; // &lt;/div&gt; var $i = $('&lt;span&gt;' + $c.html() + '&lt;/span&gt;'); var $d = $('&lt;span&gt;...&lt;/span&gt;'); var $o = $('&lt;div&gt;&lt;/div&gt;'); var $b = $('&lt;div&gt;&lt;/div&gt;'); $b.css( { 'white-space' : "nowrap", 'display' : "block", 'overflow': "hidden" }).attr('title', $c.html()); $o.css({ 'overflow' : "hidden", 'width' : "100%", 'float' : "left" }); $c.html('').append($b.append( $o.append($i)).append($d)); function getWidth($w){ return parseInt( $w.css('width').replace('px', '') ); } if (getWidth($o) &lt; getWidth($i)) { while (getWidth($i) &gt; (getWidth($b) - getWidth($d)) ) { var content = $i.html(); $i.html(content.substr(0, content.length - 1)); } $o.css('width', (getWidth($b) - getWidth($d)) + 'px'); } else { var content = $i.html(); $c.empty().html(content); } } </code></pre> <p>It would be called like:</p> <pre class="lang-javascript prettyprint-override"><code>$(function(){ ellipsify($('#test')); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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