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:
Gdybym kurczyć okno wystarczające, aby element "details" był zawijany do następnej linii:
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.
'.title {max-width: 200px;/* lub cokolwiek * /} '? –
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
Z ciekawości, z jakiej przeglądarki korzystasz? – Dom