Mit Inline-Block in eine neue Zeile einbrechen?

Ich möchte die <br />'s entfernen und die Unterbrechungslinien durch CSS machen. Wenn ich die Bereiche auf display:blockdie Breite ändere, wird sie 100% betragen und die Breite muss genau der Länge des Textes entsprechen, so wie sie jetzt ist. Irgendwelche Vorschläge?

<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

Entfernen Sie alle brTags und verwenden Sie display: table.

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

Erläuterung: Die Tabelle umschließt standardmäßig die Breite ihres Inhalts, ohne eine Breite festzulegen, ist jedoch weiterhin ein Element auf Blockebene. Sie können dasselbe Verhalten erzielen, indem Sie eine Breite für andere Elemente auf Blockebene festlegen:

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

Beachten Sie, dass das <code>Element nicht wie gewohnt inline fließt <span>. Probieren Sie es mit den berechneten Stilen in Ihren Entwicklertools aus. Sie sehen den Pseudorand rechts von <span>. Auf jeden Fall ist dies dasselbe wie die Tabelle, aber die Tabelle hat den zusätzlichen Vorteil, dass sie sich immer an die Breite ihres Inhalts anpasst.

benutze float: left;undclear: left;

http://jsfiddle.net/rtM6J/

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

Legen Sie die Elemente in display: inlineund verwenden Sie :after:

.text span { display: inline }
.break-after:after { content: '\A'; white-space:pre; }

und fügen Sie die Klasse in Ihre HTML-Bereiche ein:

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

Hier ist eine andere Lösung (nur relevante Erklärungen aufgelistet):

.text span {
   display:inline-block;
   margin-right:100%;
}

Wenn der Rand in Prozent ausgedrückt wird, wird dieser Prozentsatz aus der Breite des übergeordneten Knotens entnommen. 100% bedeutet also so breit wie der übergeordnete Knoten, was dazu führt, dass das nächste Element in eine neue Zeile "verschoben" wird.

Ich denke, der beste Weg, dies ab 2018 zu tun, ist die Verwendung von 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>

Ich denke, Floats funktionieren hier am besten für Sie. Wenn Sie nicht möchten, dass das Element die gesamte Zeile einnimmt, sollte Float es nach links funktionieren.

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

Hinweis: Entfernen Sie die <br/>, bevor Sie diesen Off-Course verwenden.

Wenn Sie <p>s (nur <div>s und <span>s) nicht verwenden können, können Sie mit dieser Lösung möglicherweise sogar die inline-blockMitte oder rechts Ihres S ausrichten , wenn Sie möchten (oder sie einfach so lassen, wie Sie es ursprünglich gewünscht haben). Obwohl die Lösung möglicherweise noch mit <p>s funktioniert, denke ich nicht, dass der resultierende HTML-Code ganz korrekt wäre , aber es liegt trotzdem an Ihnen.

Der Trick besteht darin, jedes Ihrer <span>s mit einem entsprechenden zu versehen <div>. Auf diese Weise nutzen wir den durch die <div>'s verursachten Zeilenumbruch display: block(Standardeinstellung), während das visuelle grüne Kästchen (mit Ihrer display: inline-blockErklärung) an den Grenzen des Textes bleibt .

.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>

Sie können versuchen mit:

    display: inline-table;

Bei mir funktioniert es gut.