2013-06-12 19 views
6

Mam prostą strukturę HTML, który wygląda tak:Jak mogę utworzyć tekst tego zawinięcia div?

<div class="container"> 
    <div class="caption"> 
     <div class="title">This is a very, very long title!!!</div> 
     <div class="details">Details</div> 
    </div> 
    <div class="content"></div> 
</div> 

Mam stylu to bardzo prosto:

.container { 
    min-width: 200px; 
} 
.caption { 
    overflow: hidden; 
} 
.title { 
    float: left; 
} 
.details { 
    float: right; 
} 
.content { 
    height: 200px; 
    background-color: #c0c0c0; 
} 

Która wygląda następująco:

css-example

Gdybym kurczyć okno wystarczające, aby element "details" był zawijany do następnej linii:

css-example2

Jakie chciałbym się zdarzyć jest tekst wewnątrz „title” div opasania do następnej linii, ale zachować zarówno „tytuł” ​​i „szczegóły” w tej samej linii (nie zawijania).

Coś jak:

This is a very, very   Details 
long title!!! 
+----------------------------------+ 

tytuł tylko owijanie raz nie ma wystarczająco dużo miejsca, gdy okno jest zmieniany.

Czy ktoś może wskazać mi właściwy kierunek, aby to osiągnąć?

Here is a jsFiddle of the above code if anyone is interested.

Edycja: W celu wyjaśnienia, chciałbym aby nie określić stałą szerokość dla .title jeśli to możliwe. W większości przypadków chciałbym pozwolić, aby ten div był tak szeroki, jak potrzebuje.

+0

'.title {max-width: 200px;/* lub cokolwiek * /} '? –

+0

Czy można to zrobić bez podania maksymalnej szerokości/szerokości? Wolałbym, aby szerokość była jak najszersza. W większości przypadków okno i tytuł będą dość duże. Może minimalna szerokość wystarczyłaby? – KingNestor

+0

Z ciekawości, z jakiej przeglądarki korzystasz? – Dom

Odpowiedz

0

Podzielić tytuł div jak poniżej i zawinie tekst.

.title 
{ 
    float: left; 
    width: 100px; //or whatever you want 
} 

lub

.title 
{ 
    float: left; 
    width: 20%; //or whatever you want 
} 
+0

Nie chcę określać stałej szerokości dla tego elementu div, jeśli to możliwe. To okno może się rozszerzyć, by było dość szerokie, co odcięłoby etykiety na dowolną długość. – KingNestor

+0

wpisz procent Mam zaktualizowaną odpowiedź. – Guanxi

+0

użyj procentu, np. '.title {width: 40%; } '' .details {width: 58%; } ' – hmhcreative

2

to powinno działać:

http://jsfiddle.net/KV8UW/

<div class="container"> 
<div class="caption"> 
    <div class="details">Details</div> 
    <div class="title">This is a very, very long title!!!</div> 
</div> 
<div class="content"></div> 

.container { 
    min-width: 200px; 
} 
.caption { 
    overflow: hidden; 
} 
.details { 
    float: right; 
} 
.content { 
    height: 200px; 
    background-color: #c0c0c0; 
} 
1

Zastosowanie wyświetlacza dla układu: http://jsfiddle.net/3nBDd/15/

.caption { 
    display:table; 
    width:100%; 
} 
.title { 
    display:table-cell; 
    text-align: left; 
} 
.details { 
    display:table-cell; 
    text-align right; 
} 
Powiązane problemy