Menentukan parameter visibilitas teks di blok jika teks tidak tepat ditempatkan di area yang ditentukan. Dua opsi dimungkinkan: teks dipotong; Teks dipotong dan pada akhir baris ditambahkan ke banyak. Text-overflow sedang berjalan jika properti overflow ditetapkan sebagai otomatis, gulir atau disembunyikan untuk blok.
Informasi singkat
Designations.
| Deskripsi | Contoh | |
|---|---|---|
| <тип> | Menentukan jenis nilai. | <размер> |
| A && B. | Nilai harus ditampilkan dalam urutan yang ditentukan. | <размер> && <цвет> |
| A | Dgn B. | Menunjukkan bahwa hanya satu nilai dari yang diusulkan (A atau B) yang harus dipilih. | normal | Topi kecil. |
| A || Dgn B. | Setiap nilai dapat digunakan secara independen atau bersama dengan orang lain dalam urutan sewenang-wenang. | lebar || Menghitung |
| Nilai grup. | [Crop || Menyeberang] | |
| * | Ulangi nol atau lebih kali. | [,<время>]* |
| + | Ulangi satu atau lebih kali. | <число>+ |
| ? | Jenis yang ditentukan, kata atau grup tidak wajib. | sisipan? |
| (A, b) | Ulangi setidaknya A, tetapi tidak lebih dari B kali. | <радиус>{1,4} |
| # | Ulangi satu atau lebih kali melalui koma. | <время># |
Nilai-nilai
teks klip dipotong ke dalam ukuran area. Teks elipsis dipangkas dan akhir baris ditambahkan untuk titik.
Contoh
Medan magnet negatif pendinginan lingkaran besar bola surgawi, dalam hal ini eksentrisitas dan memiringkan orbit meningkat.
Hasil dari contoh ini ditunjukkan pada Gambar. satu.
Ara. 1. Dot di akhir teks
Object Model.
Sebuah Objek.tyle.TextOverflow.
Catatan
Opera hingga versi 11 menggunakan properti -O-text-overflow.
Spesifikasi
Setiap spesifikasi melewati beberapa tahap persetujuan.
- Rekomendasi - Spesifikasi disetujui W3C dan direkomendasikan sebagai standar.
- Rekomendasi kandidat ( Rekomendasi yang mungkin) - Kelompok yang bertanggung jawab atas standar terpenuhi saat memenuhi tujuannya, tetapi bantuan masyarakat pengembangan untuk mengimplementasikan standar diperlukan.
- Rekomendasi yang diusulkan ( Rekomendasi yang ditawarkan) - Pada tahap ini, dokumen tersebut diserahkan ke Dewan Penasihat W3C untuk persetujuan akhir.
- Working Draft (proyek kerja) adalah versi yang lebih matang dari draft setelah diskusi dan amandemen untuk dipertimbangkan oleh masyarakat.
- RUANG EDITOR ( Editorial Chernovik.) - Versi kasar dari standar setelah membuat editor oleh editor proyek.
- MINUMAN ( Spesifikasi Chernovik) - Versi hitam pertama dari standar.
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.
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.
- Russell Investments.
- 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.
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:
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!
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)
