CODEWITHSUNDEEP
css
ditto
ditto

Reputation: 6277

Breaking to a new line with inline-block?

I want to remove the <br />'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?

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> <br />
        <span class="large">build</span> <br />
        <span class="medium">the</span> <br />
        <span class="large">Internet</span>
    </p>
</div>

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

Fidddle

Upvotes: 97

Views: 194131

Answers (7)

Devang Rathod
Devang Rathod

Reputation: 6736

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.

Upvotes: 150

Will
Will

Reputation: 4155

I think the best way to do this as of 2018 is to use flexbox.

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* same as original below */
.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }
<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> 
        <span class="large">build</span> 
        <span class="medium">the</span> 
        <span class="large">Internet</span>
    </p>
</div>

Upvotes: 15

ultracrepidarian
ultracrepidarian

Reputation: 1118

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.

Upvotes: 11

Rui Pimentel
Rui Pimentel

Reputation: 604

If you're OK with not using <p>s (only <div>s and <span>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 <p>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 <span>s with a corresponding <div>. This way we're taking advantage of the line break caused by the <div>'s display: block (default), while still keeping the visual green box tight to the limits of the text (with your display: inline-block declaration).

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.large {  font-size:80px }
<div class="text">
  <div><span class="medium">We</span></div>
  <div><span class="large">build</span></div>
  <div><span class="medium">the</span></div>
  <div><span class="large">Internet</span></div>
</div>

Upvotes: 2

ET-CS
ET-CS

Reputation: 7160

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:

<span class="medium break-after">We</span>

Upvotes: 18

Luca
Luca

Reputation: 9705

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

Upvotes: 40

Bhushan Firake
Bhushan Firake

Reputation: 9448

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.

Upvotes: 2

Related Questions