StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here are 3 functions I use frequently to get the text width, height and adjust the size to the container's width.</p> <ul> <li><strong>getTextWidth()</strong> will return you the actual width of the text contained in the initiator.</li> <li><strong>getTextHeight(width)</strong> will return the actual height of the wrapped text contained in the initiator with a certain specified width.</li> <li><strong>autoTextSize(minSize, maxSize, truncate)</strong> will size the text within the container so it fits, considering a minimum and maximum size.</li> <li><strong>autoTruncateText()</strong> will only show the characters the user can actually see and end the text with '...'.</li> </ul> <pre class="lang-js prettyprint-override"><code>(function ($) { $.fn.getTextWidth = function() { var spanText = $("BODY #spanCalculateTextWidth"); if (spanText.size() <= 0) { spanText = $("<span id='spanCalculateTextWidth' style='filter: alpha(0);'></span>"); spanText.appendTo("BODY"); } var valu = this.val(); if (!valu) valu = this.text(); spanText.text(valu); spanText.css({ "fontSize": this.css('fontSize'), "fontWeight": this.css('fontWeight'), "fontFamily": this.css('fontFamily'), "position": "absolute", "top": 0, "opacity": 0, "left": -2000 }); return spanText.outerWidth() + parseInt(this.css('paddingLeft')) + 'px'; }; $.fn.getTextHeight = function(width) { var spanText = $("BODY #spanCalculateTextHeight"); if (spanText.size() <= 0) { spanText = $("<span id='spanCalculateTextHeight'></span>"); spanText.appendTo("BODY"); } var valu = this.val(); if (!valu) valu = this.text(); spanText.text(valu); spanText.css({ "fontSize": this.css('fontSize'), "fontWeight": this.css('fontWeight'), "fontFamily": this.css('fontFamily'), "top": 0, "left": -1 * parseInt(width) + 'px', "position": 'absolute', "display": "inline-block", "width": width }); return spanText.innerHeight() + 'px'; }; /** * Adjust the font-size of the text so it fits the container. * * @param minSize Minimum font size? * @param maxSize Maximum font size? * @param truncate Truncate text after sizing to make sure it fits? */ $.fn.autoTextSize = function(minSize, maxSize, truncate) { var _self = this, _width = _self.innerWidth(), _textWidth = parseInt(_self.getTextWidth()), _fontSize = parseInt(_self.css('font-size')); while (_width < _textWidth || (maxSize && _fontSize > parseInt(maxSize))) { if (minSize && _fontSize <= parseInt(minSize)) break; _fontSize--; _self.css('font-size', _fontSize + 'px'); _textWidth = parseInt(_self.getTextWidth()); } if (truncate) _self.autoTruncateText(); }; /** * Function that truncates the text inside a container according to the * width and height of that container. In other words, makes it fit by chopping * off characters and adding '...'. */ $.fn.autoTruncateText = function() { var _self = this, _width = _self.outerWidth(), _textHeight = parseInt(_self.getTextHeight(_width)), _text = _self.text(); // As long as the height of the text is higher than that // of the container, we'll keep removing a character. while (_textHeight > _self.outerHeight()) { _text = _text.slice(0,-1); _self.text(_text); _textHeight = parseInt(_self.getTextHeight(_width)); _truncated = true; } // When we actually truncated the text, we'll remove the last // 3 characters and replace it with '...'. if (!_truncated) return; _text = _text.slice(0, -3); // Make sure there is no dot or space right in front of '...'. var lastChar = _text[_text.length - 1]; if (lastChar == ' ' || lastChar == '.') _text = _text.slice(0, -1); _self.text(_text + '...'); }; })(jQuery); </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