CSS-Wortumbruch zweite Textzeile

Question

Wie kann ich den Text "auf seiner eigenen Seite" bleiben lassen, wenn er in der ersten Zeile überläuft?

Ich habe einen Abschnitt, der zwei Divs enthält. Die zwei Divs sind nebeneinander positioniert, aber wenn die erste Zeile voll ist, beginnt sie in einer neuen Zeile unter dem ersten Div. (und das ist das Problem)

Das erste div ist 120px breit, weil das der breiteste Text ist, der dort gedruckt werden kann. Das zweite div ist/sollte der Rest des Bildschirms sein.

Ich habe einen Link zu jafiddle erstellt, auch wenn der auf der Seite nicht klar ist. Das Problem tritt auf, wenn Sie ein kleines Fenster (Telefone usw.) haben.

Die Seite wird von PHP generiert.

http://jsfiddle.net/tL2fkLhq

.section{ 
 
     display: inline-block; 
 
     width: 100%; 
 
     float: left; 
 
    } 
 
    .pTrans1{ 
 
     float: left; 
 
     width: 120px; 
 
     color: red; 
 

 
    } 
 
    .pTrans2{ 
 
     display: inline; 
 
     
 
    }

<section><div class='pTrans1'>15<font color='blue'>1120Z</font></div> <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div></section><br>

Answer 1

Verwenden Sie einfach display: table-cell; in .pTrans2 statt display: inline;.

.pTrans2{ 
    display: table-cell; 
} 

Updated Fiddle

.section{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.pTrans1{ 
 
    float: left; 
 
    width: 120px; 
 
    color: red; 
 

 
} 
 
.pTrans2{ 
 
    display: table-cell; 
 
     
 
}

<section> 
 
    <div class='pTrans1'>15<font color='blue'>1120Z</font></div> 
 
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div> 
 
</section><br>

Answer 2

Ich habe bereits ein ähnliches Beispiel getan, die ich teilen möchte. Sie müssen die Positionierung für diesen Fall verwenden. Dies ist ein Fall von Festflüssigkeit:

+-------+-----------+ 
| FIXED | FLUUUUUID | 
+-------+-----------+ 

Oder

+-------+-----------+ 
| FIXED | FLUUUUUID | 
|  | FLUUUUUID | 
+-------+-----------+ 

Fest-Fluid Modell. In meinem Ausschnitt habe ich zwei Arten von Beispielen gezeigt. Im ersten Fall ist die Flüssigkeit weniger groß. Und der nächste hat zu lange Inhalt.

Schnipsel

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;} 
 
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;} 
 
.parent .fluid {background-color: #f99;}

<div class="parent"> 
 
    <div class="fixed">Fixed</div> 
 
    <div class="fluid">Fluid</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="fixed">Fixed</div> 
 
    <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div> 
 
</div>

Answer 3

Verwenden .pTrans2 als Blockelement mit einem margin-left:

.section{ 
    display: inline-block; 
    width: 100%; 
    float: left; 
} 
.pTrans1{ 
    float: left; 
    width: 120px; 
    color: red; 

} 
.pTrans2 { 
    display: block; 
    margin-left: 120px; 
} 

Demo: JSFiddle

Answer 4

Sie können dies tun:

CSS

.section { 
    display: block; 
    width: 100%; 
} 

.pTrans1 { 
    float: left; 
    width: 120px; 
    color: red; 
} 

.pTrans2 { 
    display: block; 
    margin-left: 120px; 
} 

DEMO HERE

Answer 5

Sie display: table;

DEMO

verwenden können

<section> 

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div> 
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div> 

</section><br> 

Answer 6

Ich ziehe die neue Flex-Box-Spezifikation über Display mit: Tabelle. Das ist streng persönlich, aber ich habe einen tiefen Hass auf das CSS-Tabellensystem, das immer so wirkt, dass ich es nicht will.

So Nenad Vracars Antwort mit einer geringfügigen Änderung zu kopieren:

Sie display: flex;

DEMO

section{ 
    display: flex; 
} 
.pTrans1{ 
    width: 120px; 
    color: red; 
} 
.pTrans2 { 
    flex: 1; 
} 

<section> 

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div> 
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div> 

</section> 

Answer 7

ändern zweite div wie diese

können

.pTrans2{ 
     width: calc(100% - 120px); 
     margin-left: 120px; 
}