CSS to line break before/after a particular `inline-block` item

Question

Let's say I have this HTML:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

and this CSS:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

The result can be seen here: http://jsfiddle.net/YMN7U/1/

Now imagine that I want to break this into three columns, the equivalent of injecting a <br> after the third <li>. (Actually doing that would be semantically and syntactically invalid.)

I know how to select the third <li> in CSS, but how do I force a line break after it? This does not work:

li:nth-child(4):after { content:"xxx"; display:block }

I also know that this particular case is possible by using float instead of inline-block, but I am not interested in solutions using float. I also know that with fixed-width blocks this is possible by setting the width on the parent ul to about 3x that width; I am not interested in this solution. I also know that I could use display:table-cell if I wanted real columns; I am not interested in this solution. I am interested in the possibility of forcing a break inside inline content.

Edit: To be clear, I am interested in 'theory', not the solution to a particular problem. Can CSS inject a line break in the middle of display:inline(-block)? elements, or is it impossible? If you are certain that it is impossible, that is an acceptable answer.

Put the 1st three and the 2nd three in two different lists? I'm assuming you don't want to do this, but I thought I"d throw it out there. — JakeParis, Jan 05 '11 at 21:22
Looks like you need to tell us what you are really trying to achieve here so someone can recommend the best method. All the options you excluded exist to solve the problem you have, why is another solution needed? — Jake, Jan 05 '11 at 21:22
@Jake I was in fact doing exactly what I stated: using a semantic list of elements and wanting to wrap after particular ones. In practice I set the width of the container, but this only works in my particular case because the items happened to be the same width and I wanted them to wrap at a consistent edge. This might not always be the case. What I am _"really trying to achieve"_ is learn whether or not CSS can force a line break in the middle of inline flow. The confident answer _"This is definitely not possible"_ is acceptable (if correct). — Phrogz, Jan 05 '11 at 21:30

score 304 · Accepted Answer · edited Jul 29 '16 at 10:18

304

I've been able to make it work on inline LI elements. Unfortunately, it does not work if the LI elements are inline-block:

Live demo: http://jsfiddle.net/dWkdp/

Or the cliff notes version:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

edited Jul 29 '16 at 10:18

Luca

9,259
5
46
59

answered Jan 05 '11 at 21:40

Šime Vidas

182,163
62
281
385

2

Sime, why does the "\A" not get printed out? Everything I've tried with the `:after` always prints as straight text. – JakeParis Jan 05 '11 at 21:44
12

@JMCCreative That's ASCII 0x0A, AKA a LF (line feed) character. See http://www.w3.org/TR/CSS2/syndata.html#strings – Phrogz Jan 05 '11 at 21:46
5

@JMC `\A` is the line feed character... it's an escape – Šime Vidas Jan 05 '11 at 21:47
This is a very interesting result, thank you. (I'll vote you up when I get more votes in a few hours.) – Phrogz Jan 05 '11 at 21:51
Can 1 of you point me in the direction of a chart or something that would show me which of the ASCII characters are possible in the `content:` block? I googled it, but I'm not getting the right stuff. Thanks – JakeParis Jan 05 '11 at 21:57
3

@JMC Official spec: http://www.w3.org/TR/CSS21/syndata.html#strings Sitepoint: http://reference.sitepoint.com/css/content – Šime Vidas Jan 05 '11 at 22:05
How can you break a new line after the last element? – vsync Feb 21 '13 at 17:56
Great tip! Unfortunately, this does not work well with the minimizing functionality in MVC ScriptBundle, as the minimizing code actually replaces the ´\A´ with a line break in the resulting CSS code, and makes the css invalid... I don't understand why it does it (spare one byte, but make it buggy...) – awe Feb 25 '13 at 07:42
I was looking for a way to add some extra spacing along with the newlines, and found that if you add `font-size: 1.3em; vertical-align: top;` it's the equivalent of a 0.3em margin along with the newline. http://jsfiddle.net/mblase75/SmEnR/ – Blazemonger Jul 08 '13 at 13:52
20

commenting here as I keep coming back to this question every few months... It won't work on inline-block because you are adding line breaks within something that it acting like a block container within an inline context. If you could break out of the context by inserting the line break between the
s it would work. Shame really as this is useful for responsive design breakpoints. I guess most of the time "inline" is just as useful as inline-block for lists

user1010892

Aug 07 '13 at 14:04

2

@AntonioMax You don't *think*? Have you tested? – Šime Vidas Aug 08 '13 at 00:35

I'd avoid :after if possible as it doesn't work for IE7 and has partial support in IE8. If you don't have to support those then go nuts (we do so don't use css content generators) – nbsp Nov 21 '13 at 19:36

1

You can always have `inline` `li`s and make their only child `inline-block`. That way you can insert a line break wherever you want and still get block behavior inside each `li`. – instanceofnull Mar 10 '15 at 16:33

@randombumper And you didn’t make a demo and show it to me because…? :) – Šime Vidas Mar 10 '15 at 16:35

@ŠimeVidas Ahh, I have coding to do and bills to pay, but since you asked so nicely and smiled... https://jsfiddle.net/p39L92xn/9/ :) – instanceofnull Mar 11 '15 at 17:11

@randombumper Why stop at inline-block? But true blocks in there :) http://jsbin.com/herofe/edit?html,css,output – Šime Vidas Mar 14 '15 at 05:08

@ŠimeVidas inline-blocks allow for out-of-the-box automatic width, just what I wanted :) – instanceofnull Mar 14 '15 at 14:12

What about the cross-browser compatibility ? Thanks. – Charaf Jan 04 '17 at 03:29

@Charaf Works everywhere I’ve checked. – Šime Vidas Jan 04 '17 at 04:47

Great, but sadly not working in IE11 + Edge when used with padding. – Markus Zeller Jun 29 '17 at 11:02

Thank you! you can go for white-space:pre-line to avoid side effects – Sebastian Rothbucher Jul 26 '17 at 14:00

@tatsu Works for me. What Chrome version and operating system do you have? – Šime Vidas Nov 03 '17 at 12:40

@ŠimeVidas windows 10 and latest chrome but it's fine I've used Marcus Whybrow's method – tatsu Nov 03 '17 at 13:48

Marcus Whybrow · Answer 2 · 2012-05-23T22:10:33.897

21

You are not interested in a lot of "solutions" to your problem. I do not think there really is a good way to do what you want to do. Anything you insert using :after and content has exactly the same syntactic and semantic validity it would have done if you had just written it in there yourself.

The tools CSS provide work. You should just float the lis and then clear: left when you want to start a new line, as you have mentioned:

See an example: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

edited May 23 '12 at 22:10

answered Jan 05 '11 at 21:22

Marcus Whybrow

19,578
9
70
90

18

The OP is not interested in your solution :) – Šime Vidas Jan 05 '11 at 21:23
2

Well nothing you can do by using `:after` will be syntactically valid or a good idea, since there are already tools in place to do this. Hence the answer. – Marcus Whybrow Jan 05 '11 at 21:26
He said "no floats" even though @Marcus's answer is probably the best solution. Boy the "float" property really takes a beating around here doesn't it? – JakeParis Jan 05 '11 at 21:26
1

Also I didn't see that bit at the end, sorry about that, but you should surely use the tools CSS gives to do the job easily. – Marcus Whybrow Jan 05 '11 at 21:27
1

@MarcusWhybrow I appreciate your help, and I can appreciate your frustration. I apologize for not making it clearer that my question was about the theoretical possibility, instead of trying to achieve a particular layout. I've edited my question to hopefully clarify this. – Phrogz Jan 05 '11 at 21:37
@Phrogz Ah OK that makes more sense, then it looks like JMC has the definitive answer :) – Marcus Whybrow Jan 05 '11 at 21:41
33

One reason to not use floats is that there is no such thing as `float: center`. – eyelidlessness May 23 '12 at 19:57
8

plus inline-block allows for all sorts of vertical alignment that floats can't – user1010892 Aug 07 '13 at 13:34
20

"Anything you insert using :after and content has exactly the same syntactic and semantic validity" - coming late to the party, but I totally disagree with this - the whole point of using :before and :after is to be able to insert styling that does not interfere with the semantic meaning of the Html. – Rupert Oct 30 '13 at 08:26
1

You completely misunderstood the purpose of poster's question **and overall - the whole purpose of what is float meant for**. Please next time try find the reason, why poster does not want to use certain solutions, before posting redundant answer. Thank you :) – jave.web Feb 27 '16 at 22:10
Another problem with `float` is that it takes the floating elements out of the layouting flow, so the surrounding `
– harfel Jan 17 '17 at 11:19

score 4 · Answer 3 · edited Apr 24 '15 at 13:18

When rewriting the html is allowed, you can nest <ul>s within the <ul> and just let the inner <li>s display as inline-block. This would also semantically make sense IMHO, as the grouping also is reflected within the html.

<ul>
    <li>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </li>
</ul>

li li { display:inline-block; }

Demo

$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });

h3 {
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: bold;
}
ul {
  margin: 0.5em auto;
  list-style-type: none;
}
li li {
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
}
img {
  width: 64px;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Features</h3>
<ul>
  <li>
    <ul>
      <li><img />Smells Good</li>
      <li><img />Tastes Great</li>
      <li><img />Delicious</li>
    </ul>
  </li>
  <li>
    <ul>
      <li><img />Wholesome</li>
      <li><img />Eats Children</li>
      <li><img />Yo' Mama</li>
    </ul>
  </li>
</ul>

score 3 · Answer 4 · answered Nov 23 '12 at 02:52

3

An easy way to split lists into rows is by floating the individual list items and then the item that you want to go to the next line you can clear the float.

for example

<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>

answered Nov 23 '12 at 02:52

matt

63
1
1

17

You should notice that the `float` setting overrides the `inline-block` setting. They don't really coexist together – Itay Feb 04 '14 at 06:25
4

if you use text-aling: center; it will not work (floating breaks it) – Павел Иванов Nov 12 '14 at 08:22

score 3 · Answer 5 · answered Feb 14 '13 at 17:02

I know you didn't want to use floats and the question was just theory but in case anyone finds this useful, here's a solution using floats.

Add a class of left to your li elements that you want to float:

<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

and amend your CSS as follows:

li { text-align:center; float: left; clear: left; padding:0.1em 1em }
.left {float: left; clear: none;}

http://jsfiddle.net/chut319/xJ3pe/

You don't need to specify widths or inline-blocks and works as far back as IE6.

score 1 · Answer 6 · answered Sep 10 '18 at 18:25

I accomplished this by creating a ::before selector for the first inline element in the row, and making that selector a block with a top or bottom margin to separate rows a little bit.

.1st_item::before
{
  content:"";
  display:block;
  margin-top: 5px;
}

.1st_item
{
  color:orange;
  font-weight: bold;
  margin-right: 1em;
}

.2nd_item
{
  color: blue;
}

score -2 · Answer 7 · answered Jul 20 '15 at 11:47

-2

A better solution is to use -webkit-columns:2;

http://jsfiddle.net/YMN7U/889/

 ul { margin:0.5em auto;
-webkit-columns:2;
}

answered Jul 20 '15 at 11:47

Vivekraj K R

2,418
2
19
38

For some use cases, this may be a reasonable solution. It is not a good solution in this case, because it completely re-orders the content to go down-then-across instead of across-then-down. – Phrogz Jul 20 '15 at 15:51
6

Who would wants to make a web application that only works in a few browsers? – user2867288 Oct 24 '15 at 16:10

score -2 · Answer 8 · answered Jan 29 '19 at 23:18

-2

Note sure this will work, depending how you render the page. But how about just starting a new unordered list?

i.e.

<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>

answered Jan 29 '19 at 23:18

Phil LaNasa

2,907
1
25
16

This causes accessibility issues. – Pangamma Aug 30 '21 at 18:47

score -3 · Answer 9 · answered Sep 02 '14 at 19:45

Maybe it's is completely possible with only CSS but I prefer to avoid "float" as much as I can because it interferes with it's parent's height.

If you are using jQuery, you can create a simple `wrapN` plugin that is similar to `wrapAll` except it only wraps "N" elements and then breaks and wraps the next "N" elements using a loop. Then set your wrappers class to `display: block;`.

(function ($) {
    $.fn.wrapN = function (wrapper, n, start) {
        if (wrapper === undefined || n === undefined) return false;
        if (start === undefined) start = 0;
        for (var i = start; i < $(this).size(); i += n)
           $(this).slice(i, i + n).wrapAll(wrapper);
        return this;
    };
}(jQuery));

$(document).ready(function () {
    $("li").wrapN("<span class='break' />", 3);
});

Here is a JSFiddle of the finished product:

http://jsfiddle.net/dustinpoissant/L79ahLoz/

CSS to line break before/after a particular `inline-block` item

9 Answers9

Demo

Linked