CSS to Line Break Before/After a Particular 'Inline-Block' Item

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

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; 
}

CSS line break after n list item `inline-block`

The problem stems from css's nth child selector and the display: inline-block/block combination.

You may want a CSS fix for this, and I'm sure it exists, but this also works. It's up to you if you're that concerned about the inline conditional.

I made this span a few lines so people wouldn't have to scroll to see the code that fixes it.

This was fixed via one change in your template:

template: '<ul class="lk-color-chooser">
              <lk-color  ng-repeat-start="color in colors track by $index" color="color" ng-class="{\'selected\': selectedColor == color}">
              </lk-color>{{$index}}
              <br ng-if="($index + 1) % 3 == 0" ng-repeat-end>
           </ul>',

CSS when inline-block elements line-break, parent wrapper does not fit new width

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width).

Then,

• When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
• When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
• When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.

Prevent line break after inline-block

It looks like the first character doesn't need to be in the <nobr> element, so this will work:

<nobr><span class="inlineblock"></span></nobr>wide...

Still ugly, but definitely less ugly! It works on Firefox and Chrome at least.

Breaking to a new line with inline-block?

Remove all br tags and use display: table.

.text span {
   background: rgba(165, 220, 79, 0.8);
   display: table;
   padding: 7px 10px;
   color: white;
}
.fullscreen .large { font-size: 80px }

Explanation: The table wraps the width of its content by default without setting a width, but is still a block level element. You can get the same behavior by setting a width to other block-level elements:

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

Notice the <code> element doesn't flow inline with the <span> like it would normally. Check it out with the computed styles in your dev tools. You'll see pseudo margin to the right of the <span>. Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.

Breaking to a new line with inline-block

One hacky idea is to add a new line using pseudo element and make the element inline so that the line-break will affect the inline-block elements. The drawback is that you will not be able to style an inline element like you do with an inline-block one

.ib {
  border: 1px solid #333;
  display: inline-block;
  padding: 3px;
}

.block-start {
  display: inline;
  padding: 3px;
  white-space: pre-wrap;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

/* to rectify the position of the first one*/
.block-start:first-child {
  padding-left: 0;
}

<div class="container">
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>