Jak zwiększyć szerokość div zgodnie z tekstem w środku?

Question

Mam element div, który użytkownicy wprowadzają w nim tekst. Ale chcę zwiększyć jego szerokość zgodnie z tekstem, aż do maks. 50% ekranu. Mój kod CSS:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

Wynik:

Jest dużo miejsca po wyświetleniu komunikatu "555", chcę ten rozmiar tylko wtedy, gdy użytkownik wprowadza tekst jak:

Jak więc zwiększyć szerokość elementu div, w zależności od rozmiaru tekstu?

Answer 1

Istnieje wiele sposobów, aby to osiągnąć, ale IMHO jest najczystsze. Twoim problemem jest to, że pudełka są "chciwe" i spróbują rozwinąć się do dostępnej szerokości.

Aby temu zapobiec, można:

• Make it "pływać: left;"
• Ale także "clear: left;" aby uniemożliwić dodatkowe elementy "pływające", aby wykorzystać dostępną przestrzeń po prawej stronie.

CSS staje:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
    float: left; 
    clear: left; 
} 

I, pod warunkiem pełnego kodu i dodatkowe wyjaśnienia (po najechaniu myszą) na Liveweave tutaj: http://liveweave.com/DFCZFj

Answer 2

Spróbuj zmienić typ div na display na table.

Example Here

.messages { 
    display: table; 
    max-width: 50%; 
    min-width: 150px; 
    /* other declarations omitted due to brevity */ 
} 

Answer 3

Wystarczy dodać display:inline;. Możesz również usunąć właściwość min width, w przeciwnym razie, jeśli tekst jest mniejszy, nadal będziesz mieć tę lukę.

Answer 4

elementy blokowe (div „s domyślny typ wyświetlania) podejmie próbę pobrania maksymalnej poziomej przestrzeni kontenera. Wyobraź sobie niejawne width:100% ilekroć je widzisz. inline-block utworzy elementy na poziomie bloku, w których następny element będzie próbował renderować poziomo w sąsiedztwie (pod warunkiem, że jest wystarczająco dużo miejsca). . To jest to, co chcesz używać (display: table będzie działać w tym roztworze, jak również, ale to ma swoje dziwactwa Unikam ich

Więc rozwiązanie wymaga trzech części:.

pierwsze, trzeba określić, że wiersze nie będzie większa niż 50% dostępnej powierzchni będzie to zrobić z ramy zewnętrznej..

.frame { 
    max-width:50%; 
} 

Następnie wiadomości powinny same być każdy danej przestrzeni całego wiersza (y) w czasie, więc użyjemy nieokreślonego tagu div wokół każdej wiadomości.

Wreszcie, użyjesz display: inline-block dla najgłębszych elementów messages. Ponieważ są one jedynym dzieckiem nadrzędnego tagu, nie musisz się martwić, że elementy nawzajem się kręcą. Używając wbudowanego bloku, szerokość jest szanowana, a to daje nam świetne miejsce do zastosowania koloru tła.

.messages { 
    display: inline-block; 
    min-width: 150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

tylko jako punkt odniesienia, można by oczekiwać, że znaczniki będą wyglądać następująco:

<div class="frame"> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 
    </div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra 
    text 
    </div></div> 
</div> 

myślę znajdziesz to daje zamierzony efekt. Nawiasem mówiąc, jest to ogólne rozwiązanie - ale jeśli wybierzesz min-width, który jest większy niż 50%, zapewnisz, że dwoje rodzeństwa typu inline-block będzie zbyt szerokie dla linii. Jeśli to zrobisz, możesz zrezygnować z dodatkowego div w znacznikach.