CSS untuk menghentikan pembungkusan teks di bawah gambar


87

Saya memiliki markup berikut:

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

Saya ingin agar jika teksnya membungkus, itu tidak masuk ke 'kolom' untuk gambar. Saya tahu saya bisa melakukannya dengan table(yang saya lakukan) tetapi ini tidak bisa diterapkan karena alasan ini .

Saya telah mencoba yang berikut ini namun tidak berhasil:

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

Saya juga mencoba float: right.

Terima kasih.

EDIT: Saya ingin terlihat seperti ini:

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

Tidak seperti ini:

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

1
bisakah kamu memasukkan kode kamu ke jsfiddle?
Hardik

Saya pikir Anda perlu sedikit lebih jelas tentang niat Anda di sini. Jika Anda tidak ingin teks untuk membungkus maka Anda hanya dapat menggunakan white-space: nowrap;di li span {...}, tetapi saya mendapatkan kesan bahwa Anda sedang mencoba untuk melakukan sesuatu yang lain
My Head Setia

Maaf @MyHeadHurts - tampak jelas bagi saya :) Saya ingin dua kolom di baris. 20px kiri untuk gambar. Sisanya untuk teks. Jika teks membungkus, saya ingin itu memulai baris kedua dari bungkus 20px dari kiri (di bawah tempat teks awal dimulai).
Nick

1
Untuk orang yang lewat, Anda tidak perlu berurusan dengan lebar seperti yang disarankan oleh jawaban yang diterima. Ini jauh lebih sederhana: buat apa yang disebut konteks pemformatan baru . Lihat jawaban Joe Conlin. Untuk latar belakang lebih lanjut, lihat latar belakang saya.
hqcasanova

1
@hqcasanova Sebagai catatan, jawaban Dan diterima 9 bulan sebelum Joe memposting jawaban dan 16 bulan sebelum jawaban Anda. Saya tidak akan menolak jawaban Dan, meskipun terima kasih telah menambahkan alternatif.
Nick

Jawaban:


35

Karena pertanyaan ini mendapatkan banyak pandangan dan ini adalah jawaban yang diterima, saya merasa perlu menambahkan penafian berikut:

Jawaban ini khusus untuk pertanyaan OP (Yang memiliki set lebar dalam contoh). Meskipun berhasil, Anda harus memiliki lebar pada setiap elemen, gambar, dan paragraf. Kecuali itu kebutuhan Anda, saya sarankan menggunakan solusi Joe Conlin yang diposting sebagai jawaban lain untuk pertanyaan ini.

The spanelemen elemen inline, Anda tidak dapat mengubah lebar dalam CSS.

Anda dapat menambahkan CSS berikut ke span Anda sehingga Anda dapat mengubah lebarnya.

display: block;

Cara lain, yang biasanya lebih masuk akal, adalah menggunakan <p>elemen sebagai induk untuk Anda <span>.

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

Karena <p>merupakan blockelemen, Anda dapat mengatur lebarnya menggunakan CSS, tanpa harus mengubah apa pun.

Namun dalam kedua kasus tersebut, karena Anda memiliki elemen blok sekarang, Anda perlu mengapung gambar sehingga teks Anda tidak semuanya berada di bawah gambar Anda.

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

PS Alih-alih float:leftpada gambar, Anda bisa juga menempatkan float:rightpada li ptetapi dalam kasus itu, Anda juga akan perlu text-align:leftuntuk meluruskan kembali teks dengan benar.

PSS Jika Anda melanjutkan dengan solusi pertama dengan tidak menambahkan <p>elemen, CSS Anda akan terlihat seperti ini:

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

Ini sangat membantu. Saya mengubah spanmenjadi pelemen. Kemudian hanya dua ini tampaknya melakukan trik: li p {margin-left: 40px} .fav_star {float: left}. Lebar gambar diatur oleh gambar itu sendiri, pelemennya otomatis a blockdan saya membiarkan lebarnya saja. Terima kasih untuk ini.
Nick

2
Jika Anda akan menggunakan, display:blockAnda sebaiknya menggunakan a divkarena untuk itulah (atau gunakan a pseperti yang juga Anda sarankan). Tidak perlu membungkus teks dua kali - jika Anda menggunakan, pAnda bisa kehilangan span.
Gareth

IMO, Anda tidak boleh menggunakan HTML untuk mengubah desain halaman Anda. Ini adalah tugas untuk CSS (Tentu saja ada pengecualian, khususnya bila Anda membutuhkan kompatibilitas lintas browser). Saya percaya bahwa menggunakan HTML yang tepat, dan memiliki "semantik yang baik", lebih penting. Jadi saya tidak akan menggunakan a div, dalam hal ini, a plebih masuk akal. Kehilangan spanitu agak sepele bagi saya, dan tergantung pada bagaimana Anda menyusun konten Anda.
Dan

Membungkus a <span>in a <p>adalah sihir langsung dari Hogwartz! Bekerja dengan indah!
Janus

252

Jawaban yang sangat sederhana untuk masalah ini yang tampaknya menarik perhatian banyak orang:

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

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

Lihat contoh: http://jsfiddle.net/vandigroup/upKGe/132/


11
Inilah jawaban yang tepat untuk pertanyaan ini. Teknik ini tidak perlu menyetel lebar tetap ke paragraf. Solusi yang jauh lebih sederhana dan mudah. Bekerja dengan sempurna, bahkan di IE8.
chocolata

4
Sebenarnya ini tidak akan berfungsi jika elemen yang berisi teks adalah span(kasus OP). A display: blockakan dibutuhkan untuk span. Tapi, menyimpan itu, saya setuju ini adalah solusi yang jauh lebih elegan. Jika ada yang bertanya-tanya apa keajaiban di baliknya overflow: hidden, lihat jawaban saya di bawah ini.
hqcasanova

8
Ini bukan perilaku yang saya harapkan, tapi ini luar biasa.
Gavin

2
Sebagai catatan, jawaban ini datang 8 bulan setelah yang saya centang :)
Nick

2
Wow. Bekerja dengan sempurna. Saya tidak percaya saya tidak pernah tahu ini sebelumnya.
SFlagg

25

Bagi mereka yang menginginkan info latar belakang, berikut adalah artikel singkat yang menjelaskan mengapa overflow: hiddenberhasil. Ini ada hubungannya dengan apa yang disebut konteks pemformatan blok . Ini adalah bagian dari spesifikasi W3C (yaitu bukan hack) dan pada dasarnya adalah wilayah yang ditempati oleh elemen dengan aliran tipe blok.

Setiap kali diterapkan, overflow: hiddenmembuat konteks pemformatan blok baru . Tapi itu bukan satu-satunya properti yang mampu memicu perilaku itu. Mengutip presentasi oleh Fiona Chan dari Sydney Web Apps Group:

  • float: kiri / kanan
  • overflow: tersembunyi / otomatis / gulir
  • display: sel-tabel dan nilai / blok-sebaris apa pun yang terkait dengan tabel
  • posisi: mutlak / tetap

1
Dapatkah Anda menambahkan beberapa detail dari artikel itu ke dalam jawaban Anda, jika tautannya mati?

Selamat pagi Australia! Terima kasih atas komentarnya.
hqcasanova

Ini sangat bagus untuk menampilkan blok kode yang mungkin harus bersaing dengan gambar atau bilah sisi mengambang di dekatnya.
AlexMA

Teknik seperti yang dijelaskan semula bekerja dengan baik, meskipun seperti yang dikatakan orang lain, ini bukan perilaku yang saya harapkan. Namun, saya tidak melihat bahwa float atau inline-block bekerja tanpa overflow, dan tentu saja nilai tampilan terkait tabel dan posisi absolut atau tetap memiliki konsekuensi tata letak lain yang mungkin atau mungkin tidak dapat diterima dalam konteks.
enigment

3

Jika Anda ingin margin-leftmengerjakan spanelemen, Anda harus membuatnya display: inline-blockatau display:blockjuga.


Mungkin perlu vertical-align: top;gambar dengan ini, juga.
ThinkingStiff

2

pengaturan display:flexuntuk teks berhasil untuk saya.


Ini tampaknya merupakan padanan yang lebih modern dari pengaturan overflow:auto. Saya yakin ini tidak berfungsi persis sama di semua situasi, tetapi berhasil juga untuk saya.
Matt Browne

1

Bungkus div di sekitar gambar dan span dan tambahkan yang berikut ke CSS seperti ini:

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%;
            }

KURANG

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

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.