Banyak yang mungkin menghadapi masalah ketika beberapa teks perlu menarik dalam satu baris. Dalam hal ini, teks bisa sangat panjang, dan lebar blok di mana teks ini biasanya terbatas, setidaknya ukuran yang sama dari jendela browser. Untuk kasus-kasus ini, properti teks-overflow ditemukan, yang dibuat untuk rekomendasi CSS3, dan pertama kali diimplementasikan dalam IE6, untuk waktu yang lama. Jika properti ini digunakan untuk blok, jika teksnya lebih besar dari blok itu sendiri, teks dipotong dan akhirnya dibuat pada akhirnya. Meskipun semuanya tidak begitu sederhana, tetapi kembali ke ini sedikit nanti.
Dari Internet Explorer "Ohms semuanya jelas apa yang relatif terhadap browser lain? Dan meskipun properti teks-overflow saat ini dikecualikan dari spesifikasi CSS3, Safari mendukungnya (setidaknya dalam versi ke-3), Opera juga (dari versi ke-9) , Apakah properti satu-overflow-text). Dan Firefox - Tidak, tidak mendukung, dan bahkan dalam versi ke-3 tidak akan. Sayangnya, tetapi faktanya. Tapi bisakah kamu melakukan sesuatu?
Yang harus dilakukan, tentu saja, Anda bisa. Ketika saya mencari di internet tentang properti ini, dan bagaimana dengan ini di Firefox, muncul dengan solusi sederhana. Inti dari solusi:
Itu saja. Baca item dalam artikel.
Keputusan itu tidak buruk, tetapi ada masalah:
- Teks dapat klip di huruf tengah (konvensional), dan kami akan melihat "perangkat keras".
- Beberapa selalu ditampilkan, bahkan ketika teks lebih kecil dari lebar blok (yaitu, itu tidak rontok dan membosankan tidak perlu).
Langkah pertama
Untuk memulainya, fokus pada masalah kedua, yaitu, bagaimana cara menghindari tampilan titik ketika tidak perlu. Setelah melanggar kepala dan "sedikit" bereksperimen, saya menemukan keputusan. Saya akan mencoba menjelaskan.
Intinya adalah bahwa kita memerlukan blok terpisah dengan titik, yang hanya akan muncul ketika teks membutuhkan terlalu banyak ruang lebar. Di sini saya datang gagasan tentang unit terapung dumping. Meskipun terdengar menakutkan, tetapi di sini, hanya, artinya blok yang selalu, dan ditekan ke kanan, tetapi ketika lebar teks menjadi besar, teks mengeluarkan blok ke baris berikutnya.
Ayo pergi berlatih, jika tidak sulit untuk dijelaskan. Mari kita atur struktur HTML:
teks yang sangat panjang
Tidak terlalu kompak, tetapi saya tidak bekerja lebih kecil. Jadi, kami memiliki container container div.ellipsis, satu blok dengan teks kami dan blok lain yang akan banyak berisi. Perhatikan bahwa "blok dengan elipsis" sebenarnya kosong, karena kita tidak perlu tiga poin ekstra ketika kita menyalin teks. Tidak perlu takut akan kurangnya kelas tambahan, karena struktur ini ditangani dengan baik oleh pemilih CSS. Dan di sini adalah CSS sendiri:
.lipsis (overflow: tersembunyi; ruang putih: nowrap; tinggi garis: 1.2em; tinggi: 1.2em; batas: 1px merah padat;) .lipsis\u003e div: div; + Div (float: Kanan; margin-top: -1.2em;) .elipsis\u003e
Itu saja. Kami memeriksa dan memastikan bahwa Firefox, Opera, Safari berfungsi sebagai dikandung. Yaitu sangat aneh, tetapi dapat diprediksi, hasilnya. Di IE6, semuanya turun, dan di IE7 tidak berfungsi, karena tidak mendukung konten yang dihasilkan. Tapi kami akan kembali ke IE.
Saya akan menganalisis yang dilakukan. Pertama, kami mengatur garis-tinggi dan tinggi blok utama, karena kita perlu mengetahui ketinggian blok dan ketinggian garis teks. Kami menentukan nilai yang sama untuk blok margin-top dengan elipsis, tetapi dengan nilai negatif. Dengan demikian, ketika blok tidak "diatur ulang" ke baris berikutnya, itu akan lebih tinggi dari garis teks (per baris) ketika diatur ulang - itu akan berada pada levelnya (pada kenyataannya, itu lebih rendah, kita hanya membuat penundaan ke satu baris). Untuk menyembunyikan berlebihan, terutama ketika Anda tidak perlu menunjukkan titik, kami membuat overflow: tersembunyi untuk unit utama, sehingga elipsis akan berada di atas garis - itu tidak akan ditampilkan. Ini memungkinkan kita untuk menghapus dan jatuh di luar blok (di tepi kanan), teks. Sehingga teks secara tak terduga tidak ditransfer dan tidak mendorong blok dengan adas dan di bawah dan di bawah, kami membuat ruang putih: sekarangRAP, dengan demikian melarang transfer - teks kami akan selalu menjadi satu baris. Untuk blok dengan teks, kami meletakkan float: kiri sehingga segera tidak membuang satu blok dengan ellipsis dan menempati lebar minimum. Karena di dalam unit utama (div.llipsis) Kedua blok mengambang (float: kiri / kanan), blok utama akan runtuh ketika blok dengan teks kosong, jadi untuk unit utama kami menetapkan tinggi tetap (tinggi: 1.2em). Nah, yang terakhir, kami menggunakan elemen pseudo :: setelah untuk menampilkan titik. Untuk elemen pseudo ini, kami juga menentukan latar belakang untuk tumpang tindih teks yang akan di bawahnya. Kami meminta bingkai untuk unit utama, hanya untuk melihat dimensi blok, nanti kami akan menghapusnya.
Jika Firefox juga mendukung Pseudo-Elements sebagai Opera dan Safari, dalam hal positioning mereka (tugas untuk mereka posisi / float dll), tidak mungkin menggunakan unit terpisah untuk dot. Cobalah mengganti 3 aturan terakhir, pada saat berikut:
.lipsis\u003e Div: Anak Pertama :: Setelah (float: Kanan; Konten: "..."; margin-top: -1.2em; latar belakang - Posisi: Relatif;)
Di Opera dan Safari, semuanya berfungsi seperti sebelumnya, dan tanpa blok tambahan dengan Ellipsis. Tapi Firefox mengecewakan. Tetapi bagi dia bahwa kita membuat keputusan. Nah - Anda harus mengelola struktur HTML awal.
Langkah dua
Seperti yang Anda perhatikan, kami menyingkirkan masalah munculnya titik ketika teks cocok dengan blok. Namun, kami masih memiliki masalah lain - teks terputus di tengah huruf. Dan selain itu, itu tidak berfungsi di IE. Untuk mengatasi yang lain, Anda perlu menggunakan aturan teks-overflow Anda untuk browser, dan hanya untuk Firefox untuk menggunakan keputusan yang dijelaskan di atas (tidak ada alternatif). Cara membuat solusi "hanya untuk Firefox" akan melihat nanti, dan sekarang kami akan mencoba untuk bekerja apa yang menggunakan teks-overflow. Rebus CSS:
.lipsis (overflow: tersembunyi; ruang putih: nowrap; tinggi garis: 1.2em; tinggi: 1.2em; batas: 1px merah padat; Text-Overflow: Elipsis; -O-text-overflow: elipsis; Lebar: 100%; } .lipsis * (tampilan: inline;) / * .lipsis\u003e div: anak pertama (float: kiri;) .lipsis\u003e Div + Div (float: kanan; margin-top: -1.2m;) .elipsis\u003e Div + Div: White; Kandungan: "...";) */
Edit, ternyata, tidak banyak. Tiga baris ditambahkan ke gaya unit utama. Dua di antaranya termasuk teks-overflow. Tugas Lebar Lebar: 100% Kebutuhan IE sehingga teks tidak memindahkan unit ke infinity, dan properti teks-overflow; Intinya, kami membatasi lebar. Secara teori, div, seperti semua elemen blok, membentang di seluruh lebar wadah, dan lebar: 100% untuk apa-apa, dan bahkan berbahaya, tetapi IE memiliki masalah dengan tata letak, karena wadah selalu diregangkan dengan ukuran Konten, jadi kalau tidak tidak mungkin. Kami juga membuat semua elemen internal string (inline), karena untuk beberapa peramban (Safari & Opera) teks-overflow akan berfungsi, karena di dalam ada item blok (blok). Kami telah menyerahkan tiga aturan terakhir, karena dalam hal ini mereka tidak diperlukan dan semua orang rusak (bertentangan). Aturan-aturan ini hanya akan dibutuhkan untuk Firefox.
Mari kita lihat apa yang kita lakukan dan lanjutkan.
Langkah Ketiga
Ketika saya sekali lagi melihat halaman (sebelum saya akan menulis artikel ini), disebutkan di awal, kemudian, demi kepentingan, memenangkan komentar, tentang masalah ide-ide yang berdekatan. Dan ditemukan, dalam komentar, di mana dikatakan tentang solusi lain, yang bekerja di Firefox dan IE (untuk orang ini, seperti untuk penulis artikel pertama, browser lain, tampaknya tidak ada). Jadi, dalam keputusan ini, penulis agak berbeda berjuang dengan fenomena ini (kurangnya teks-overflow), menggantung penangan ke overflow dan peristiwa-peristiwa di bawah yang diperlukan untuk membuat banyak bila diperlukan. Tidak buruk, tetapi menurut saya solusi ini sangat mahal (dalam hal sumber daya), terutama karena agak muncul. Namun, memahami bagaimana dia mencapainya, menemukan hal yang menarik, yaitu properti CSS -Moz-mengikat. Sejauh yang saya mengerti, ini adalah analog perilaku di IE, hanya di bawah saus lain dan tiba-tiba. Tetapi kami tidak akan memperdalam detailnya, mari kita katakan bahwa dengan cara ini Anda dapat menggantung handler JavaScript ke elemen menggunakan CSS. Kedengarannya aneh, tetapi berhasil. Apa yang kita lakukan:
.lipsis (overflow: tersembunyi; ruang putih: nowrap; tinggi garis: 1.2em; tinggi: 1.2em; batas: 1px padat merah; teks-overflow: elipsis; lebar: lebar: 100%; ; -Moz-Binding: URL (moz_fix.xml # ellipsis); Zoom: 1; ) .lipsis * (tampilan: inline;) .moz-elipsis\u003e div: anak pertama (Float: kiri; Tampilan: blok; } .moz-ellipsis\u003e Div + Div (Float: kanan; margin-top: -1.2em; Tampilan: blok; } .moz-ellipsis\u003e Div + Div :: After (Latar Belakang - Warna: Putih; Konten: "...";)
Seperti yang Anda lihat, kami kembali membuat banyak perubahan. Pada langkah ini di IE7 ada kesalahan aneh, semuanya dilemparkan jika tidak meletakkan zoom: 1 untuk unit utama (opsi termudah). Jika Anda menghapus (menghapus, mengomentari) aturan.ellipsis * atau.moz-ellipsis\u003e Div + Div (yang sama sekali tidak menyangkut IE7), maka kesalahan itu menghilang. Aneh semua ini, jika ada yang tahu ada apa, beri tahu saya. Sementara itu, kami akan melewati zoom: 1 dan pindah ke Firefox.
Properti -moz-binding menghubungkan instruksi file moz_fix.xml dengan identifikasi ellipsis. Isi file XML ini sebagai berikut:
Semua yang membuat konstruktor ini adalah unsur yang berfungsi, menambahkan kelas Moz-Ellipsis. Ini hanya akan bekerja di Firefox (Browser Gecko?), Oleh karena itu, hanya kelas Moz-Ellipsis yang akan ditambahkan ke item, dan kami dapat menambahkan aturan tambahan untuk kelas ini. Apa dan yang dicari. Tidak begitu yakin tentang perlunya. Tangan
Anda dapat mengingatkan bahwa penerimaan ini menggunakan file eksternal dan secara umum JavaScript. Tidak perlu menakut-nakuti. Pertama, jika file tidak memuat dan / atau javascript dinonaktifkan dan tidak berfungsi, tidak ada yang mengerikan, pengguna tidak melihat titik-titik di akhir, teks akan menebang di ujung blok. Artinya, dalam hal ini, kita mendapatkan solusi "tidak mengganggu". Anda dapat memastikan diri Anda sendiri.
Dengan demikian, kami mendapat gaya untuk browser "Big Four", yang mengimplementasikan teks-overflow untuk Opera, Safari & IE, dan untuk Firefox itu meniru, tidak, tetapi lebih baik daripada tidak sama sekali.
Langkah Keempat
Di tempat ini bisa ditempatkan, tetapi saya ingin meningkatkan keputusan kami untuk meningkatkan. Karena kita dapat menggantung konstruktor pada unit apa pun dan, sesuai, dapatkan kontrol atasnya, mengapa tidak memanfaatkan ini. Kami menyederhanakan struktur kami:
teks yang sangat panjang
Oh ya! Saya pikir Anda akan setuju dengan saya - ini yang Anda butuhkan!
Sekarang hapus semuanya terlalu banyak:
.lipsis (overflow: tersembunyi; ruang putih: nowrap; garis-tinggi: 1.2em; tinggi: 1.2em; teks-overflow: elipsis; -O-text-overflow: ellipsis; lebar: 100%; URL (moz_fix.xml # elipsis);) .moz-ellipsis\u003e div: anak pertama (float: kiri;) .moz-ellipsis\u003e Div + Div (float: kanan; -1.2em;). -Lipsis\u003e Div + Div :: After (Latar Belakang-Warna: Putih; Konten: "...";)
Kami akhirnya menghapus bingkai merah :)
Dan sekarang, saya menambahkan moz_fix.xml kami:
Apa yang terjadi di sini? Kami membuat ulang struktur HTML awal kami. Artinya, kesulitan dengan blok dibuat secara otomatis, dan hanya di Firefox. Kode Javascript ditulis dalam tradisi terbaik :)
Sayangnya, situasi ketika teks dipotong di tengah huruf, kita tidak dapat menghindari seseorang (meskipun dimungkinkan, sementara, karena solusi semacam itu masih sangat mentah, dan di masa depan dapat berubah). Tapi kita bisa menghilangkan efek ini sedikit. Untuk melakukan ini, kita akan memerlukan gambar (latar belakang putih dengan gradien transparan), dan beberapa perubahan gaya:
.moz-ellipsis\u003e div: anak pertama (float: kiri; Margin-Right: -26px; ) .Moz-ellipsis\u003e div + div (float: kanan; margin-top: -1.2em; Latar Belakang: URL (ellipsis.png) ulangi-y; Padding-Left: 26px; }
Kami melihat dan bersukacita dalam hidup.
Pada ini dan letakkan intinya.
Kesimpulan
Saya akan memberikan contoh kecil, untuk tata letak pihak ketiga. Saya mengambil daftar isi dengan salah satu halaman Wikipedia (hal pertama muncul), dan menerapkan metode yang dijelaskan di atas untuk itu.
Secara umum, keputusan ini dapat disebut universal hanya dengan peregangan. Itu semua tergantung pada tata letak Anda dan kompleksitasnya. Mungkin Anda akan memerlukan file, dan mungkin rebana. Meskipun dalam banyak kasus saya pikir itu akan berhasil. Dan kemudian, Anda sekarang memiliki titik awal;)
Saya harap Anda telah belajar sesuatu yang menarik dan bermanfaat dari artikel;) belajar, bereksperimen, berbagi.
Semoga berhasil!
Vlad Merzehevich.
Terlepas dari kenyataan bahwa monitor diagonal besar menjadi lebih mudah diakses, dan resolusi mereka terus tumbuh, kadang-kadang tugas dalam ruang terbatas muncul untuk memastikan banyak teks. Misalnya, mungkin diperlukan untuk versi seluler dari situs atau untuk antarmuka di mana jumlah baris itu penting. Dalam kasus seperti itu masuk akal untuk memotong garis teks panjang, hanya menyisakan awal kalimat. Jadi kami memberikan antarmuka ke bentuk kompak dan mengurangi jumlah informasi yang ditampilkan. Memotong baris dapat dilakukan pada sisi server menggunakan PHP yang sama, tetapi melalui CSS itu lebih sederhana, apalagi, Anda selalu dapat menunjukkan teks sepenuhnya, misalnya, ketika Anda mengarahkan kursor mouse. Selanjutnya, pertimbangkan metode bagaimana teks memotong gunting imajiner.
Bahkan, semuanya turun untuk menggunakan properti overflow dengan nilai tersembunyi. Perbedaan hanya menjilat dalam tampilan teks kami yang berbeda.
Menggunakan Overflow.
Agar properti overflow menunjukkan dirinya dengan teks dalam semua kemuliaannya, Anda perlu membatalkan transfer teks menggunakan ruang putih dengan nilai Nowrap. Jika ini tidak dilakukan, maka efek yang kita butuhkan tidak akan, transfer akan ditambahkan dalam teks dan itu akan ditampilkan sepenuhnya. Dalam Contoh 1, ditampilkan cara memangkas teks panjang dengan seperangkat properti gaya yang ditentukan.
Contoh 1. Overflow untuk Teks
Html5 css3 yaitu cr op sa fx
Hasil dari contoh ini ditunjukkan pada Gambar. satu.
Ara. 1. Jenis teks setelah menerapkan properti overflow
Seperti yang dapat dilihat dari gambar, kurangnya secara keseluruhan adalah satu - tidak jelas bahwa teks memiliki kelanjutan, sehingga perlu untuk memberikan ini kepada pengguna. Ini biasanya menerapkan gradien atau elipsis.
Tambahkan gradien ke teks
Untuk memperjelas bahwa teks di sebelah kanan tidak berakhir, di atasnya Anda dapat menerapkan gradien dari warna transparan ke warna latar belakang (Gbr. 2). Ini akan menciptakan efek pembubaran teks secara bertahap.
Ara. 2. Teks dengan gradien
Contoh 2 menunjukkan penciptaan efek ini. Gaya elemen itu sendiri praktis akan tetap sama, gradien itu sendiri akan ditambahkan menggunakan semu-Pseudo :: Afterter dan CSS3. Untuk melakukan ini, masukkan elemen pseudo kosong melalui properti konten dan gunakan gradien dengan awalan yang berbeda untuk browser utama (Contoh 2). Lebar gradien mudah berubah melalui lebar, Anda juga dapat menyesuaikan tingkat transparansi, mengganti nilai 0,2 sendiri.
Contoh 2. Gradien Over Text
Html5 css3 yaitu 8 yaitu 9+ cr op sa fx
Arpeggio intradiscree mengubah polimer, ini adalah vertikal satu tahap dalam jaringan polifonik ultra-pertanian.
Metode ini tidak berfungsi di browser Internet Explorer ke inklusif versi 8.0, karena tidak mendukung gradien. Tetapi Anda dapat meninggalkan CSS3 dan membuat gradien dengan cara lama, melalui gambar dalam format PNG-24.
Metode ini hanya digabungkan dengan latar belakang monofonik dan dalam hal gambar latar belakang, gradien di atas teks akan bergegas ke mata.
Dot di akhir teks
Alih-alih gradien di akhir teks yang dipangkas, Anda juga dapat menggunakan titik. Selain itu, akan ditambahkan secara otomatis menggunakan properti teks-overflow. Dia memahami semua browser, termasuk versi yang lebih lama dari IE, dan satu-satunya kelemahan dari properti ini masih merupakan statusnya yang tidak jelas. Di CSS3, sepertinya properti ini mencakup, tetapi kode tidak menjalani validasi.
Dalam Contoh 3, aplikasi properti teks-overflow dengan nilai ellipsis, yang menambahkan titik telah ditampilkan. Ketika Anda mengarahkan kursor mouse pada teks, itu ditampilkan sepenuhnya dan disorot oleh latar belakang.
Contoh 3. Menggunakan teks-overflow
Html5 css3 yaitu cr op sa fx
Hasil dari contoh ini ditunjukkan pada Gambar. 3.
Ara. 3. Teks dengan dot
Kelebihan besar dari metode ini adalah saat gradien dan kebodohan tidak ditampilkan jika teks pendek dan ditempatkan sepenuhnya di area yang ditentukan. Jadi teks akan ditampilkan seperti biasa ketika sepenuhnya terlihat di layar dan dipotong menjadi penurunan lebar elemen.
Namun, kadang-kadang nama panjang dari tautan barang jengkel - tiga garis, atau header panjang dari berbagai blok. BAGAIMANA AKAN MENJADI BESAR JIKA Dimungkinkan untuk entah bagaimana semua pekerjaan ini, buat kompak. Dan ketika Anda mengarahkan mouse sudah menunjukkan judul sepenuhnya.
Untuk ini, CSS favorit kami akan datang untuk menyelamatkan. Semuanya sangat sederhana, lihat.
Misalkan kita memiliki blok dari katalog dengan barang:
Ini strukturnya:
Barang luar biasa dengan harga super, hanya 100 rubel. Gosok malam kesepian Anda dan berikan gelombang kehidupan!
Ini gaya-Nya:
THESBLOCK (batas: 1px solid #cccccc; margin: 15px auto; padding: 10px; lebar: lebar: 250px;) .Header (Border-bottom: 1px DRAFED; Ukuran font: 16px; Bold; Margin-bottom: 12px; ;)
Setuju, itu terlihat mengerikan. Tentu saja, Anda dapat mengurangi nama barang. Tetapi bagaimana jika ratusan atau ribuan itu? Anda juga dapat menggunakan PHP untuk memotong bagian dari judul, membatasi sejumlah karakter. Tetapi apa yang harus saya lakukan jika tata letak akan berubah dan blok akan kurang dari atau sebaliknya, 2-3 kali lebih banyak? Semua ini bukan pilihan, semua ini tidak cocok untuk kita.
Dan di sini kita akan datang ke penyelamatan dan properti ajaibnya teks-overflow.. Tetapi perlu digunakan untuk digunakan bersama dengan beberapa properti lainnya. Di bawah ini saya akan menunjukkan solusi yang sudah jadi, setelah itu saya akan menjelaskan apa.
Jadi, bergerak menuju pengeditan manual dari nama barang dan perangkat lunak pemangkasan gaya, kami naik ke tangan CSS dan melihat kami:
Keajaiban Yudo kelebihan berat badan Syloper, misterius, seni. 20255-59.
Barang luar biasa dengan harga super, hanya 100 rubel. Gosok malam kesepian Anda dan berikan gelombang kehidupan!
Nah, lebih baik? Saya pikir sangat banyak! Dan bawa mouse ke judul ... voila! Di sini ditampilkan sepenuhnya.
Dalam struktur, kami tidak mengubah apa pun, saya hanya menambahkan diva dengan kelas .Header. Tag judul. Dan di sini adalah gaya baru yang ditambah:
THESBLOCK (batas: 1px solid #cccccc; margin: 15px auto; padding: 10px; lebar: lebar: 250px;) .Header (Border-bottom: 1px DRAFED; Ukuran font: 16px; Bold; Margin-bottom: 12px; ; Melimpah: tersembunyi; teks-overflow: elipsis; ruang putih: nowrap;)
Lihat apa yang kami lakukan:
- Kami menambahkan unit properti. ruang putih: nowrapyang menghilangkan kata-kata ke string baru dalam teks, sehingga menariknya ke dalam garis;
- Lalu kami menambahkan properti overflow: Tersembunyi.yang membatasi visibilitas string blok lebar kami, sehingga memotong semuanya terlalu banyak dan menunjukkannya kepada pengunjung;
- Nah, pada akhirnya kami menambahkan Troytiech ke properti media baris kami text-Overflow: EllipsisDengan demikian, memberi pengunjung untuk memahami bahwa ini bukan akhir dari garis, dan apa yang Anda butuhkan, mungkin, bawa wastafel dan melihatnya sepenuhnya.
Cinta CSS, Studi CSS, dan gedung situs sepertinya tidak akan Anda hal yang sulit \u003d)
Ada teks panjang sewenang-wenang yang akan ditampilkan di dalam unit tinggi dan lebar lebar. Dalam hal ini, jika teks tidak ditempatkan sepenuhnya, fragmen teks harus ditampilkan, yang sepenuhnya ditempatkan di blok yang ditentukan, setelah itu dot diatur.
Tugas ini cukup umum, pada saat yang sama itu tidak sepele, seperti yang terlihat.
Opsi untuk teks satu baris pada CSS
Dalam hal ini, Anda dapat menggunakan properti teks-overflow: elipsis. Dalam hal ini, wadah harus memiliki properti. meluap. Sama tersembunyi. atau klip
Blok (lebar: 250px; ruang putih: nowrap; overflow: tersembunyi; teks-overflow: elipsis;)
Opsi untuk teks multi-line pada CSS
Cara pertama untuk memotong teks multi-line menggunakan properti CSS untuk menerapkan elemen-elemen pseudo : Sebelum. dan : setelah.. Untuk memulai markup HTML
Lorem ipsum dolor duduk amet, konsektetuer adipiscing elit, sed diam nonumy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. UT WISI Enim Iklan Minim Veniam, que nostrud berolahraga ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo konsep. Duis Autem Vel Eum Iriure Dolor di Hendrerit di Vulitate Velit Esse Molestie, Vel Illum Dolore Eu Feugiat Nulla Fasilisis di Vero Eros et Accumsan Et Iusto Odio Dignissim qui pujian zzril delenit augue nulla facilisi.
Dan sekarang properti itu sendiri
Kotak (overflow: tersembunyi; tinggi: 200px; lebar: 300px; tinggi-tinggi: 25px;) .box: sebelum: "float: lebar; lebar: 200px;) .box\u003e *: first (float) : Kanan; lebar: 100%; margin-kiri: -5px;) .box: setelah (konten: "\\ 02026"; ukuran kotak: kotak konten; mengapung: Posisi: -25px; : 100%; Lebar: 3em; margin-kiri: -3em; Padding-Right: 5px; Text-align: Hak; Background-size: 100% 100%; Latar Belakang: Linear-Gradien (ke kanan, RGBA (255, 255) , 255, 0), putih 50%, putih);)
Cara lain adalah menggunakan properti lebar kolom yang dengannya kami mengatur lebar kolom untuk teks multi-line. Benar, saat menggunakan metode ini, untuk menetapkan di akhir elipsis. Html:
Blok (overflow: tersembunyi; tinggi: 200px; lebar: 300px;) .block__inner (-webkit-kolom-lebar: 150px; -moz-width: 150px; tinggi: 100%;)
Cara ketiga untuk memecahkan untuk teks multi-line pada CSS adalah untuk browser WebKit.. Di dalamnya, kita harus menggunakan beberapa sifat spesifik dengan awalan -Webkit.. Utama adalah -webkit-line-clamp yang memungkinkan Anda menentukan jumlah string yang ditampilkan di blok. Solusinya indah tetapi agak terbatas karena pekerjaannya dalam kelompok browser terbatas
Blok (overflow: tersembunyi; teks-overflow: elipsis; display: -webkit-kotak; -webkit-line-clamp: 2; -WebKit-Box-Orient: vertikal;)
Opsi untuk teks multi-line pada Javascript
Ini menggunakan blok tambahan yang tidak terlihat di mana teks kami awalnya ditempatkan, setelah itu dihapus oleh satu karakter, hingga ketinggian unit ini menjadi kurang atau sama dengan ketinggian blok yang diinginkan. Dan pada akhirnya, teks bergerak ke blok sumber.
var block \u003d dokumen. Queryselector (".block"), teks \u003d blok. InnerHTML, klon \u003d dokumen. Creatleeelement ("Div"); Klon. Gaya. Posisi \u003d "absolut"; Klon. Gaya. visibilitas \u003d "tersembunyi"; Klon. Gaya. lebar \u003d blok. ClientWidth + "PX"; Klon. innerHTML \u003d teks; Dokumen. Tubuh. Appendchild (clone); Var l \u003d teks. Panjang - 1; Untuk (; l\u003e \u003d 0 && clone. ClientHeight\u003e blok. KlienHeight; - L) (clone. InerHTML \u003d Teks. Substring (... ";) blok. InnerHTML \u003d klon. InnerHTML;
Sama dalam bentuk plugin untuk jQuery:
(Fungsi ($) (var truncate \u003d el. Teks \u003d el. Teks (), tinggi \u003d el. Tinggi (), klon \u003d el. Klon (); klon. CSS ((posisi: "Absolute", Visibility: "Hidden" ", Tinggi:" AUTO ")); el. Setelah (klon); var l \u003d teks. Panjang - 1; untuk (; l\u003e \u003d 0 && klon. Tinggi () (Klon) ( Teks. substring (0, L) + "...");) El. Teks (Klon Teks ()); Klon. Hapus ();); $. fn. fungsi () (mengembalikan ini. masing-masing. Fungsi () (truncate ($);)););) (jQuery));
Pengenalan CSS3 memerlukan perubahan revolusioner pada hari kerja harian desainer web. CSS3 tidak berhenti mengejutkan kami setiap hari. Hal-hal yang Anda lakukan hanya dengan JavaScript sekarang mudah dilakukan dengan CSS3. Misalnya, properti teks-overflow.
Kadang-kadang selama penciptaan situs, kita perlu menyembunyikan bagian dari teks dinamis tanpa beralih ke baris berikutnya. Artinya, masukkan teks panjang ke dalam tabel dengan lebar tetap. Pada saat yang sama, Anda perlu menunjukkan kepada pengguna bahwa bagian yang terlihat dari teks tidak semuanya. Ada juga bagian yang tersembunyi. Mirip dapat ditampilkan menggunakan tiga arah (...).
Dengan CSS3, kami dapat dengan mudah menerapkannya menggunakan properti teks-overflow CSS.
Menandai
Text-Overflow: Elipsis;
Nilai elipsis Memungkinkan Anda menambahkan Troytiech (...)
Properti Text-Overflow: Ellipsis berguna ketika:
1. Teks melampaui sel
2. Di sel ada ruang kosong: nowrap.
Kami memiliki div dengan lebar 150 piksel untuk menampilkan nama perusahaan dari database. Tetapi pada saat yang sama kami tidak ingin nama-nama panjang perusahaan untuk belajar ke baris baru dan merusak penampilan meja. Artinya, kita perlu menyembunyikan teks yang melampaui batas 150 piksel. Kami juga ingin memberi tahu pengguna tentang hal itu. Sehingga maksudnya adalah bahwa tidak semua nama ditampilkan. Dan kami ingin seluruh teks saat melayang mouse.
Mari kita lihat seperti yang kita lakukan dengan CSS3.
Perusahaan-Bungkus UL LI (
text-Overflow: Elipsis;
overflow: Tersembunyi;
ruang putih: sekarangRAP; )
- Nama perusahaan.
- Manajemen Aset Envestnet.
- Investasi Russell.
- Jaringan Keuangan Mutual Northwestern
- Jaringan keuangan.
Dukungan Browser
Dengan dukungan di antara browser, properti ini memiliki satu perawat kecil. Segala sesuatu kecuali Firefox ditampilkan dengan benar dengan benar. Tapi, mereka bernyanyi, ada solusi dan masalah ini!
Troyaty di Firefox.
Sayangnya, tokek (mesin keluaran halaman c) Firefox tidak mendukung properti ini. Namun, browser ini mendukung XBL, yang dengannya kami akan keluar dari situasi ini.
Tokek. - Ini adalah mesin output mesin gratis (English Layout Engine) Browser Mozilla Firefox, Netscape dan lainnya. Nama-nama lama adalah "Raptor" dan "Nglayout". Konsep utama tokek adalah untuk mendukung standar internet terbuka, seperti HTML, CSS, W3C DOM, XML 1.0 dan Javascript. Konsep lain - lintas platform. Hingga saat ini, Gecko bekerja pada sistem operasi Linux, Mac OS X, FreeBSD dan Microsoft Windows, serta pada Solaris, HP-UX, AIX, IRIX, OS / 2, OpenVMS, AMIGA dan lainnya.
Untuk menampilkan triple di Firefox, kita perlu menambahkan satu string ke lembar gaya.
jika Anda ingin menonaktifkan properti, cukup tambahkan:
Moz-binding: url ("binding.xml # tidak ada");
Langkah selanjutnya adalah membuat file binding.xml di tempat yang sama di mana lembar gaya disimpan. Kami dapat menggunakan editor teks apa pun untuk ini! Salin kode di bawah ini dan beri nama file binding.xml.
Var string \u003d this.textcontent.split (/ s + / g)
if (! string [0]) string.shift ()
Jika (! String [string.length - 1]) string.pop ()
Ini.value \u003d string.join ("")
Ini.display \u003d string.length? "": "Tidak ada"
Kode akhir untuk semua browser
Perusahaan-Bungkus UL LI (
Text-Overflow: Elipsis;
-O-text-overflow: elipsis;
-Moz-Binding: URL ("binding.xml # ellipsis");
Ruang putih: sekarangRAP;
Overflow: Tersembunyi;
}
CSS3 menjadi alat desainer web utama di seluruh dunia untuk menciptakan situs yang belum pernah terjadi sebelumnya dengan kode minimum. Ada yang sederhana, secara harfiah dalam satu baris, solusi yang sebelumnya hanya mungkin hanya dengan Photoshop atau JavaScript. Mulai studi fitur CSS3 dan HTML5 hari ini dan Anda tidak akan menyesal!
Untuk menonjol dari massa abu-abu penerjemah dan menaklukkan simpati Anda, pembaca yang terhormat, pada akhir pelajaran saya akan menjadi pikiran dan pepatah yang bijak. Masing-masing baris ini akan menemukan sesuatu :)
Transfer dengan keuntungan yang tidak dapat Anda ubah.
