Breaking to a New Line with Inline-Block

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>

How to break long word into new line in an inline-block div

You have to set max-width for your inline-block element.

.container {  position: absolute;   overflow: hidden;   width: 200px;   height: 100px;   border: 2px solid rgb(64, 72, 75);   background-color: rgba(64, 72, 75, 0.14902);}
.name {  color: rgb(255, 255, 255);   background-color: rgb(64, 72, 75);   padding: 0px 7px;   word-wrap: break-word;  display:inline-block;  max-width: calc(100% - 14px); // 100% - padding}

<div class="container">  <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="container" style="top: 150px">  <div class="name">Lorem ipsum dolor sit amet Breaking to a New Line with Inline-BlockBreaking to a New Line with Inline-BlockBreaking to a New Line with Inline-BlockBreaking to a New Line with Inline-BlockBreaking to a New Line with Inline-BlockBreaking to a New Line with Inline-BlockBreaking to a New Line with Inline-Blockaaaaae</div></div><div class="container" style="top: 300px">  <div class="name">a</div></div>

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

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

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.

display: inline-block forces new line

In my opinion, floats are more suitable for this case.

#wrapper {  width: 100%;  overflow: hidden; /* more reliable way to contain floats                       by creating the isolated Block Formatting Context (BFC)                       more on this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */}.block {  display: block;  overflow: hidden; /* new BFC again, now to preven overlapping of regular and floating blocks */}.block_50x100 {  width: 50%;  padding-top: 100%;  background: #0f0;  float: left;}.block_50x50 {  width: 50%;  padding-top: 50%;  background: #00f;}.block_50x50+.block_50x50 {  background: #f00;}

<div id="wrapper">  <div id="b1" class="block block_50x100">  </div>  <div id="b2" class="block block_50x50">  </div>  <div id="b3" class="block block_50x50">  </div></div>

Inline-block div starts a new line

Just use table-cell instead.

Like:

.wrapper {  display:table;  }
.display_inlineblock {  display:table-cell;  }

<div class="wrapper">  <div class="display_inlineblock"><img src="image.png"></div>  <div class="display_inlineblock">Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. </div></div>

How to display inline blocks without breaking them on new line when shrinking parent

Add white-space:nowrap and overflow:hidden to outer:

.outer {
    width: 100%;
    border: 1px solid black;
    white-space:nowrap;
    overflow:hidden;
}

jsFiddle example

---

Related Topics