2013-01-31 31 views
6

Mam pasek boczny o stałej szerokości składający się z paska startowego nav-list, w którym niektóre elementy listy mają etykiety wyrównane do prawej.Zawijanie słów CSS z elementami pływającymi

Na przykład:

<li> 
    <a href="#">abc_test_randomrandom</a> 
    <span class="pull-right label">0000</span> 
</li> 

Jednak to nie zadziała, jeśli link jest długi. Rozwija się, wypełniając całą linię i przesuwa etykietę do następnej linii.

Poddałem jsFiddle demo, aby zademonstrować to zachowanie. EDYCJA: A teraz także gist.

Pożądane zachowanie to abc_test_randomrandom i 0000 w tej samej linii, z długim zawijaniem łańcucha do następnej linii, jeśli to konieczne. czy to możliwe?

Odpowiedz

2

myślę Praveen's solution jest rzeczywiście lepsza realizacja, ale aby dostać się do zachowania pierwotnie żądanej, display: inline-block, word-wrap: break-word i ustawienie width przytwierdza to.

li a {width: 70%; display: inline-block; word-wrap: break-word;} 

word wrapping

2

Tak. Użyj stałej szerokości i nadaj mu overflow: hidden; z text-ellipsis.

li a {width: 60%; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap;} 
li span {width: 40%; display: inline-block;} 

Nie mogę otworzyć jsFiddle. Więc nie widziałem dokładnego problemu.

+1

nie zawinąć nadmiar tekstu do następnej linii, choć jak one wymagane; po prostu ścina to elipsą ...? Ponadto, w celu uzyskania zgodności z IE7 należy dodać * display: inline; * zoom: 1; za każdym razem, gdy używasz wyświetlacza: blok inline, ponieważ IE7 nie rozpoznaje tego typu wyświetlania. –

+0

To prawda, że ​​to nie zawija tekstu, ale myślę, że wielokropka z przesuwem myszy do rozwinięcia jest w rzeczywistości lepsza niż to, co początkowo chciałem. – rouge8

2

W programie Bootstrap polecenie "przeciągnij w prawo" jest zasadniczo po prostu opakowaniem dla elementu pływającego CSS. Musisz wstawić spektrum 0000 przed abc_test_randomrandom w znaczniku i powinno ono owijać zakotwiczenie do dwóch linii w razie potrzeby, tak aby twój element pływający pojawił się przed elementem, który się unosi. Może być konieczne ustawienie prawego marginesu zakotwiczenia, aby była to szerokość elementu pływającego. Nie mogę teraz załadować jsFiddle, aby załadować teraz, bo inaczej dałbym ci lepszy przykład. Spróbuję zaglądać z powrotem.

EDYCJA: Udało mi się załadować twoje jsFiddle.

Jeśli przestawisz przęsła przed zakotwiczeniem w kodzie HTML i dodasz ten CSS, działa to. Jeśli twój tekst będzie zawierał podkreślenia zamiast spacji, będziesz potrzebował CSS do zawijania tekstu, o którym wspomniałeś w swojej odpowiedzi.

Zaletą tego jest to, że nie wymaga to użycia hacków CSS (tj. Do wyświetlania: wbudowanego bloku) w starszych wersjach IE, jeśli jest to związane z projektem.

.nav-list a { display: block; margin-right: 30px; } 

screen shot from updated jsFiddle

Powiązane problemy