Breaking to a new line with inline-block

Question

I want to remove the  lt br   gt  s and do the break lines through CSS  If I change the spans to display block the width will go 100  and I need the width to be exactly the length of the text  like it is now  Any suggestions    lt div class  fullscreen  gt       lt p class  text  gt           lt span class  medium  gt We lt  span gt   lt br   gt           lt span class  large  gt build lt  span gt   lt br   gt           lt span class  medium  gt the lt  span gt   lt br   gt           lt span class  large  gt Internet lt  span gt       lt  p gt   lt  div gt    text span      background rgba 165  220  79  0 8      display inline-block     padding 7px 10px     color white     fullscreen  large    font-size 80px     Fidddle

User · Answer

I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.

.text span {
       background:rgba(165, 220, 79, 0.8);
       float: left;
       clear: left;
       padding:7px 10px;
       color:white;
    }

Note:Remove <br/>'s before using this off course.

User · Answer

If you re OK with not using  lt p gt s  only  lt div gt s and  lt span gt s   this solution might even allow you to align your inline-blocks center or right  if you want to  or just keep them left  the way you originally asked for   While the solution might still work with  lt p gt s  I don t think the resulting HTML code would be quite correct  but it s up to you anyways   The trick is to wrap each one of your  lt span gt s with a corresponding  lt div gt   This way we re taking advantage of the line break caused by the  lt div gt  s display  block  default   while still keeping the visual green box tight to the limits of the text  with your display  inline-block declaration     x000D   x000D   text span   x000D     background rgba 165  220  79  0 8   x000D     display inline-block  x000D     padding 7px 10px  x000D     color white  x000D    x000D   large    font-size 80px   x000D   lt div class  text  gt  x000D     lt div gt  lt span class  medium  gt We lt  span gt  lt  div gt  x000D     lt div gt  lt span class  large  gt build lt  span gt  lt  div gt  x000D     lt div gt  lt span class  medium  gt the lt  span gt  lt  div gt  x000D     lt div gt  lt span class  large  gt Internet lt  span gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   lt span style  quot display block border 1px solid red width 100px  quot  gt Like a default table  lt  span gt   lt code gt null lt  code gt   Notice the  lt code gt  element doesn t flow inline with the  lt span gt  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  lt span gt    Anyway  this is the same as the table  but the table has the added benefit of always forming to the width of its content

User · Answer

You can try with       display  inline-table    For me it works fine

User · Answer

Here is another solution  only relevant declarations listed     text span      display inline-block     margin-right 100       When the margin is expressed in percentage  that percentage is taken from the width of the parent node  so 100  means as wide as the parent  which results in the next element getting  pushed  to a new line

User · Answer

I think the best way to do this as of 2018 is to use flexbox    x000D   x000D   text   x000D    display  flex  x000D    flex-direction  column  x000D    align-items  flex-start  x000D    x000D     same as original below    x000D   text span   x000D     background rgba 165  220  79  0 8   x000D     display inline-block  x000D     padding 7px 10px  x000D     color white  x000D    x000D   fullscreen  large    font-size 80px   x000D   lt div class  fullscreen  gt  x000D       lt p class  text  gt  x000D           lt span class  medium  gt We lt  span gt   x000D           lt span class  large  gt build lt  span gt   x000D           lt span class  medium  gt the lt  span gt   x000D           lt span class  large  gt Internet lt  span gt  x000D       lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

use float  left  and clear  left   http   jsfiddle net rtM6J    text span      background  rgba 165  220  79  0 8      float  left     clear  left     padding  7px 10px     color   fff

User · Answer

Set the items into display  inline and use  after    text span   display  inline    break-after after   content    A   white-space pre      and add the class into your html spans    lt span class  medium break-after  gt We lt  span gt

[css] Breaking to a new line with inline-block?

Examples related to css