Zawijanie wyrazów CSS Druga linia tekstu

Question

Jak mogę sprawić, że tekst pozostanie "na swojej własnej stronie", gdy przepełni się pierwszy wiersz?

Mam sekcję, która zawiera dwa elementy div. Dwa elementy div są umieszczone obok siebie, ale jeśli pierwszy wiersz jest pełny, rozpoczyna się on w nowej linii pod pierwszym elementem div. (i to jest problem)

Pierwszy element div ma szerokość 120 pikseli, ponieważ jest to najszerszy tekst, który można w nim wydrukować. Drugim elementem div jest/powinna być reszta ekranu.

Utworzyłem link do jafiddle również w przypadku, gdy ten na stronie nie wyjaśnia. Problem występuje, gdy masz małe okno (telefony itp.).

Strona jest generowana przez php.

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

Wystarczy użyć display: table-cell; w .pTrans2 zamiast 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

już wykonali podobny przykład, który chciałbym się podzielić. W tym przypadku musisz użyć pozycjonowania. Jest to przypadek stałej płynu:

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

Albo

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

Fixed-Fluid modelu. W moim fragmencie zademonstrowałem dwa rodzaje przykładów. W pierwszym przypadku płyn ma mniejszy rozmiar. A następny ma zbyt długą treść.

Fragment

.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

Zastosowanie .pTrans2 jako element bloku z 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

Można to zrobić:

CSS

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

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

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

DEMO HERE

Answer 5

Można użyć display: table;

DEMO

.section{ 
    display: table; 
} 
.pTrans1{ 
    width: 120px; 
    color: red; 
    display: table-cell; 
} 
.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 6

Wolę użyciu nowego flex-box specyfikację nad wyświetlaczem: stół. To jest ściśle osobiste, ale mam głęboką nienawiść do systemu tabel CSS, który zawsze wydaje się działać w sposób, który nie chce tego.

Tak, aby skopiować Nenad Vracars odpowiedź z lekkim modyfikacjom:

Można użyć 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

Zmień drugi dział jak to

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