Line Breaks When Using CSS "Display:Inline"

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.

Inline-block vs inline elements in terms of line-breaks

The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.

Line breaks when using CSS display:inline

Add this:

HTML:

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

CSS:

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}

Preventing line breaks between inline-block elements longer than 1 line

Width of the inline-block elements is automatically determined by its contents. As 1st span element is occupying max width of the row, 2nd element is getting wrapped to next line and same with 3rd span as well. Last two elements are in same line because they have the enough space to occupy.

Simple solution of this will be changing display : inline-block to display:inline

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.

Forcing CSS inline-block display to new line

Remove float: left; from .thumbnail

.gallery{
    display:block;
}
.thumbnail{
    display:inline-block;
    border:0px;
    max-width:250px !important;
    width: auto !important;
    height: auto !important;
    margin-left: 1cm;
    margin-right: 1cm;
    margin-top: 1cm;
    margin-bottom: 1cm;
}

Force line break after inline-block element using CSS

can use float instead of inline-block

form {
    max-width: max-content;
    margin: auto;
}

form p {
    float: left;
    clear: left;
}

Line break between inline elements

Add display:block to a

div{  background: #333;  color: #fff;  margin: 0 auto;  padding: 20px;  text-align: center;  width: 400px;}a{  color: red;  display: block;}

<div>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.</div>

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