StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I just wanted to point out <em>why</em> the change that @Unmocked provided actually works, and it has to do with the <a href="https://stackoverflow.com/a/14033814/1454806">difference between display: inline and display: inline-block</a>.</p> <p>To explain, here's a little background on the difference between <code>block</code> display and <code>inline</code> display.</p> <p><strong>Block Display</strong></p> <p><code>block</code> elements, in general, are elements which <em>cause</em> layout. They receive their own bounding box, and have the ability to push other elements around to some degree in order to fit into the space available within the browser's rendering area. Examples of <code>block</code> items include: <code>h1</code>, <code>p</code>, <code>ul</code>, and <code>table</code>. Note that each of these items, by default, <em>starts a new line</em> and also <em>ends its own line when closed</em>. In other words - they fit into a block of text by creating their own paragraph-level section.</p> <p><strong>Inline Display</strong></p> <p><code>inline</code> elements, in general, are displayed in-line with the text. In other words, they are designed to display <em>with-<strong>in</strong> the <strong>line</strong> of text</em>. Examples include <code>i</code>, <code>b</code>, or <code>span</code>. Note that each of these items, by default, <em>continues with the flow of its surrounding text</em>, without forcing a newline before or after itself.</p> <p>Enter the mid-way case...</p> <p><strong>Inline-Block Display</strong></p> <p><code>inline-block</code> is a hybrid of the above two. In essence, an <code>inline-block</code> element <em>starts</em> wherever its preceding text leaves off, and attempts to fit into the flow of the document <code>inline</code>. However, if it reaches a point where it needs to <code>wrap</code>, it will drop to a <em>new line</em>, as if it were a <code>block</code> element. Subsequent text will then continue immediately following the <code>inline-block</code> element, and continue wrapping as normal. This can lead to some strange situations.</p> <p>Here is an example, to show what I mean. To see it in action, check out <a href="http://cssdesk.com/daptm" rel="nofollow noreferrer">this cssdesk snippet</a>.</p> <p><img src="https://i.stack.imgur.com/Zbi8U.png" alt="enter image description here"></p> <p>In your example, you were setting the <code>:after</code> pseudo-element to be <code>display: inline-block</code> - which meant that when it happened to extend past the right-most boundary of the wrapping display, it acted like the light-blue text in the example - and wrapped, as a block. When you instead change the <code>:after</code> element to <code>display: inline</code>, it causes it to act just like any other text - and without whitespace between it and the preceding letters, the word-wrap acts as you wanted it to.</p> <p>I hope this helps!</p> <p><strong>Note:</strong> The other thing which changed between your original <a href="http://jsfiddle.net/GmeAq/" rel="nofollow noreferrer">fiddle</a> and the <a href="http://jsfiddle.net/6jh2j/1/" rel="nofollow noreferrer">updated one</a> is the elimination of <code>white-space</code> around the text.</p> <p>In the first fiddle, your HTML looks like:</p> <pre><code><div class="container2"> foo bar </div> </code></pre> <p>While the browser doesn't <em>display</em> the spaces before and after the text, it does <em>contain</em> the spaces, and when the <code>:after</code> element is rendered, it is as if this is happening:</p> <pre><code><div class="container2"> foo bar :after</div> </code></pre> <p>The browser compresses the multiple spaces into single spaces, but still puts a space between the word <code>"bar"</code> and the <code>:after</code> element. Just like a space between any other <em>words</em>, this will cause the wrap to occur after <code>"bar"</code> but before <code>:after</code> at a certain width.</p> <p>In the second fiddle, you are using:</p> <pre><code><div class="container-wide">foo bar</div> <div class="container-narrow">foo bar</div> </code></pre> <p>In this case, because there are no spaces trailing the <code>"foo bar"</code> strings, the browser renders the <code>:after</code> element displayed immediately following the end of the content string. It is as if this is happening:</p> <pre><code><div class="container-narrow">foo bar:after</div> </code></pre> <p>No break in <code>inline</code>-rendered text means no break.</p> <p>For an example demonstrating this, please see <a href="http://jsfiddle.net/TroyAlford/6jh2j/2/" rel="nofollow noreferrer">this update</a> to your jsFiddle.</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