StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.</p> <p>Try making an example at <a href="http://www.jsfiddle.net" rel="nofollow">http://www.jsfiddle.net</a> so people better see what you're describing.</p> <p><strong>UPDATE</strong></p> <p>Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.</p> <p>To do this, get your <code><div></code> (or container element) and check its <code>.scrollHeight</code> and <code>.clientHeight</code> properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the <code>.style.fontSize</code> property.</p> <p>An <em>untested</em> example of what I'm describing is like this:</p> <pre><code>myDiv = $('containerElement'); // Get container object using its ID size = 50; // Start with 50px font size while(myDiv.scrollHeight > myDiv.clientHeight) { // Decrement font size until scroll is less than client myDiv.style.fontSize = (size - 1) + 'px'; } </code></pre> <p>You'll have to do a little legwork on this to get it to work how you like. Things to note:</p> <ul> <li>I used the dollar function to get an object, you can google it for more info</li> <li>Your container must have defined dimensions for <code>.clientHeight</code> to find</li> <li>You may need to try <code>.offsetHeight</code> instead of <code>.clientHeight</code></li> </ul> <p>If you're just looking to control overflow, you can use CSS:</p> <ul> <li><code>overflow-x:hidden</code> or scroll or auto, <code>overflow-y</code> is the same</li> <li><code>white-space:nowrap</code> will prevent auto text wrapping</li> </ul> <p>But, once again, my answer is vague since it's not clear (with code) what you're asking.</p>

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