CSS, aby zatrzymać zawijanie tekstu pod obrazem


87

Mam następujące znaczniki:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Chcę, aby tekst zawijał się, nie trafiał do „kolumny” obrazu. Wiem, że mogę to zrobić za pomocą table(co robiłem), ale z tego powodu nie jest to wykonalne .

Próbowałem następujących bez powodzenia:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

Ja też próbowałem float: right.

Dzięki.

EDYCJA: chcę, żeby wyglądało to tak:

IMG   Text starts here and keeps going... and
      wrap starts here.

Nie tak jak to:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

1
czy możesz umieścić swój kod w jsfiddle?
Hardik,

Myślę, że musisz trochę jaśniej przedstawić swoje zamiary tutaj. Jeśli nie chcesz, aby otoczyć tekst następnie można po prostu użyć white-space: nowrap;w li span {...}, ale mam wrażenie, że staramy się robić coś innego
Boli mnie głowa

@MyHeadHurts Przeprosiny - wydawało mi się jasne :) Chcę mieć dwie kolumny w linii. Lewe 20 pikseli to obraz. Pozostała część dotyczy tekstu. Jeśli tekst zawija się, chcę, aby zaczynał drugą linię zawijania 20 pikseli od lewej (poniżej miejsca, w którym zaczynał się tekst początkowy).
Nick,

1
W przypadku przechodniów nie musisz zajmować się szerokościami, jak sugeruje zaakceptowana odpowiedź. To znacznie prostsze: utwórz tak zwany nowy kontekst formatowania . Zobacz odpowiedź Joe Conlin. Aby uzyskać więcej informacji, zobacz moje.
hqcasanova

1
@hqcasanova Dla przypomnienia, odpowiedź Dana została przyjęta 9 miesięcy przed opublikowaniem przez Joe i 16 miesięcy przed twoją. Nie zamierzam odrzucać odpowiedzi Dana, chociaż dziękuję za dodanie alternatyw.
Nick

Odpowiedzi:


35

Ponieważ to pytanie zyskuje wiele opinii i była to akceptowana odpowiedź, poczułem potrzebę dodania następującego zastrzeżenia:

Ta odpowiedź była specyficzna dla pytania PO (które miało szerokość określoną w przykładach). Chociaż to działa, wymaga szerokości każdego elementu, obrazu i akapitu. O ile nie jest to Twoje wymaganie, polecam skorzystanie z rozwiązania Joe Conlin, które jest zamieszczone jako kolejna odpowiedź na to pytanie.

Plik spanElement jest elementem inline, nie można zmienić jego szerokość w CSS.

Możesz dodać następujący CSS do swojego zakresu, abyś mógł zmienić jego szerokość.

display: block;

Innym sposobem, który zwykle ma większy sens, jest użycie <p>elementu jako rodzica dla twojego <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Ponieważ <p>jestblock elementem, możesz ustawić jego szerokość za pomocą CSS, bez konieczności zmiany czegokolwiek.

Ale w obu przypadkach, ponieważ masz teraz element blokowy, będziesz musiał przesunąć obraz tak, aby cały tekst nie znalazł się pod obrazem.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS Zamiast float:leftna obrazie, można również umieścić float:rightna li pale w takim przypadku konieczne będzie także text-align:leftprawidłowo wyrównać tekst.

PSS Jeśli zdecydowałeś się na pierwsze rozwiązanie polegające na nie dodawaniu <p>elementu, twój CSS powinien wyglądać tak:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

To jest naprawdę pomocne. Zmieniłem spando pelementu. Wtedy właśnie te dwa wydawał się rade: li p {margin-left: 40px} .fav_star {float: left}. Szerokość obrazu jest ustalana przez sam obraz, pelement jest automatycznie a, blocka szerokość zostawiłem samą. Dzięki za to.
Nick,

2
Jeśli zamierzasz użyć display:block, równie dobrze możesz użyć a, divponieważ do tego służy (lub użyj a, pjak również sugerujesz). Nie ma potrzeby podwójnego zawijania tekstu - jeśli używasz a p, możesz zgubić span.
Gareth,

IMO, nie powinieneś używać HTML do zmiany projektu swoich stron. To jest zadanie dla CSS (są oczywiście wyjątki, szczególnie gdy potrzebujesz kompatybilności z różnymi przeglądarkami). Uważam, że ważniejsze jest używanie odpowiedniego HTML-a i posiadanie „dobrej semantyki”. Więc nie użyłbym div, w tym przypadku, a pma więcej sensu. Utrata spanjest dla mnie banalna i zależy od tego, jak układasz swoje treści.
Dan,

Zawijanie <span> w sposób <p>to czary prosto z Hogwartz! Działa pięknie!
Janus

252

Bardzo prosta odpowiedź na ten problem, który wydaje się łapać wiele osób:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Zobacz przykład: http://jsfiddle.net/vandigroup/upKGe/132/


11
To jest właściwa odpowiedź na to pytanie. Ta technika nie wymaga ustawiania stałej szerokości akapitu. Dużo prostsze i łatwiejsze rozwiązanie. Działa doskonale, nawet w IE8.
chocolata

4
Cóż, w rzeczywistości to nie zadziała, jeśli element zawierający tekst był a span(przypadek OP). Potrzebny display: blockbyłby plik span. Ale oszczędzając to, zgadzam się, że jest to znacznie bardziej eleganckie rozwiązanie. Jeśli ktoś się zastanawia, na czym polega magia overflow: hidden, zobacz moją odpowiedź poniżej.
hqcasanova

7
Nie takiego zachowania bym się spodziewał, ale to jest niesamowite.
Gavin

2
Dla przypomnienia, ta odpowiedź nadeszła 8 miesięcy po tej, którą zaznaczyłem :)
Nick

2
Łał. Działał doskonale. Nie mogę uwierzyć, że nigdy wcześniej tego nie wiedziałem.
SFlagg

25

Dla tych, którzy chcą uzyskać dodatkowe informacje, oto krótki artykuł wyjaśniający, dlaczego overflow: hiddendziała. Ma to związek z tak zwanym kontekstem formatowania bloków . Jest to część specyfikacji W3C (tj. Nie jest to hack) i jest to w zasadzie obszar zajmowany przez element z przepływem typu blokowego.

Za każdym razem, gdy jest stosowany, overflow: hiddentworzy nowy kontekst formatowania bloku. Ale to nie jedyna właściwość, która może wywołać takie zachowanie. Cytując prezentację Fiony Chan z Sydney Web Apps Group:

  • float: lewo / prawo
  • przepełnienie: ukryte / automatyczne / przewijanie
  • display: tabela-komórka i wszelkie wartości związane z tabelą / inline-block
  • pozycja: bezwzględna / stała

1
Czy możesz dodać do odpowiedzi kilka szczegółów z tego artykułu na wypadek, gdyby link zniknął?

Dzień dobry Australio! Dziękuję za komentarz.
hqcasanova

Jest to doskonałe do wyświetlania bloków kodu, które mogą być zmuszone do rywalizacji z pobliskimi obrazami lub pływającymi paskami bocznymi.
AlexMA

Technika, jak pierwotnie opisano, działa dobrze, chociaż, jak powiedzieli inni, nie jest to zachowanie, którego bym się spodziewał. Jednak nie widzę, aby float lub inline-block działały bez przepełnienia, a wartości wyświetlania związane z tabelą i położenie bezwzględne lub stałe mają inne konsekwencje układu, które mogą być dopuszczalne lub nie w kontekście.
enigment

3

Jeśli chcesz, margin-leftaby działał nad spanelementem, musisz to zrobić display: inline-blocklub display:blockteż.


Prawdopodobnie potrzebuję vertical-align: top;na obrazie również z tym.
ThinkingStiff

2

ustawienie display:flextekstu zadziałało dla mnie.


Wydaje się, że jest to bardziej nowoczesny odpowiednik scenerii overflow:auto . Jestem pewien, że nie działa dokładnie tak samo we wszystkich sytuacjach, ale zadziałał również dla mnie.
Matt Browne

1

Owiń element DIV wokół obrazu i zakresu i dodaj do CSS w ten sposób:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

MNIEJ

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.