Saat melakukan tata letak DivCSS, Anda perlu mengontrol teks. Hari ini saya akan memperkenalkannya kepada Anda secara sistematis. Ada empat properti di CSS yang mengontrol jeda baris.
1. ruang putih
Anda dapat mencapai efek tag PRE dalam HTML dan efek noWrap pada sel.
tata bahasa:
spasi putih : normal sebelum nowrap
Nilai:
normal: Nilai default. Metode pemrosesan bawaan. Teks secara otomatis menangani jeda baris. Jika batas wadah tercapai, konten akan menuju ke baris berikutnya
pra: Baris baru dan karakter spasi lainnya akan dilindungi. Nilai ini memerlukan IE6+ atau !DOCTYPE yang dinyatakan sebagai dukungan mode yang sesuai standar. Jika deklarasi !DOCTYPE tidak menentukan mode yang sesuai standar, atribut ini dapat digunakan, tetapi tidak akan berpengaruh. Hasilnya setara dengan normal. Lihat pra objek
nowrap: Memaksa semua teks ditampilkan pada baris yang sama hingga akhir teks atau objek br ditemukan. Lihat atribut noWrap
menjelaskan:
Menetapkan atau mengambil bagaimana karakter spasi dalam suatu objek ditangani.
Karakter spasi putih, seperti baris baru, spasi, dan TAB, diabaikan secara default dalam dokumen HTML. Ketika properti ini disetel ke normal atau nowrap, Anda dapat menggunakan entitas bernama non-wrap-space untuk menambahkan spasi dan elemen br untuk menambahkan jeda baris. Properti ini memiliki efek yang sama pada konten yang Anda manipulasi menggunakan Model Objek Dokumen (DOM) seperti halnya pada konten yang ditampilkan oleh IE.
Properti ini berfungsi pada objek blok.
Gaya terkait:
teks-melimpah
Menggabungkannya dengan spasi menghilangkan kebutuhan untuk menulis program untuk menentukan panjang string. Klik di sini untuk melihat contoh.
tata bahasa:
text-overflow : klip elipsis
Nilai:
klip: nilai default. Tidak menunjukkan penanda kelalaian (…), tetapi hanya memotong
elipsis: Menampilkan tanda elipsis (…) ketika teks di dalam objek meluap
menjelaskan:
Menyetel atau mengambil apakah akan menggunakan tanda elipsis (...) untuk menandai luapan teks di dalam objek.
Properti ini hanya mempengaruhi luapan teks Barat normal dalam arah sebaris horizontal. Overflow inline terjadi ketika teks dalam satu baris melebihi lebar yang tersedia tanpa ada peluang untuk membungkusnya.
Untuk memaksa terjadinya overflow dan menerapkan nilai elipsis, penulis harus menyetel properti spasi putih objek menjadi nowrap.
Jika tidak ada peluang untuk jeda baris (misalnya, lebar wadah objek sempit dan ada teks panjang tanpa jeda baris yang wajar), dimungkinkan untuk melakukan overflow tanpa menerapkan nowrap.
Agar nilai elipsis dapat diterapkan, properti ini harus diset pada objek yang memiliki area tak kasat mata. Pilihan terbaik adalah mengatur properti overflow menjadi tersembunyi. Properti ini juga diterapkan ketika menyetel properti overflow ke gulir atau otomatis. Tapi scroll bar akan muncul.
Dengan memilih tanda penghilangan, teks tersembunyi dapat dipilih. Saat seleksi terjadi, tanda elipsis disembunyikan dan digantikan oleh teks.
Atribut ini menyediakan cara yang efisien untuk membuat markup kelalaian di DHTML.
2. pemutusan kata
Properti yang paling umum digunakan untuk mengontrol pembungkusan garis sering digunakan dalam kombinasi dengan word-wrap di bawah ini.
tata bahasa:
istirahat kata: istirahat normal, simpan semua
Nilai:
normal: Nilai default. Izinkan jeda baris di antara kata-kata
break-all: Perilaku ini sama seperti biasanya untuk bahasa-bahasa Asia. Pemutusan kata pada baris teks berbahasa non-Asia juga diperbolehkan. Nilai ini cocok untuk teks Asia yang berisi beberapa teks non-Asia
keep-all: Sama seperti biasanya untuk semua bahasa non-Asia. Untuk bahasa Mandarin, Korea, dan Jepang, penghentian kata tidak diperbolehkan. Cocok untuk teks non-Asia dengan sedikit teks Asia
menjelaskan:
Menetapkan atau mengambil perilaku pembungkusan kata untuk teks dalam suatu objek. Apalagi ketika muncul banyak bahasa.
Untuk bahasa Cina, break-all harus digunakan. [Potong Halaman]
3. bungkus kata
Jika halaman web yang Anda desain tidak memiliki lebar adaptif, Anda perlu mengaturnya ke break-word, jika tidak, halaman tersebut mungkin akan terhuyung-huyung.
tata bahasa:
bungkus kata: kata-kata istirahat yang normal
Nilai:
normal: nilai default. Izinkan konten melampaui batas penampung yang ditentukan
break-word: Konten akan melampaui batas. Jika perlu, pemutusan kata juga akan terjadi
menjelaskan:
Menyetel atau mengambil apakah akan memutus garis ketika garis saat ini melebihi batas wadah yang ditentukan.
Properti ini hanya berfungsi pada objek tata letak, misalnya objek blok. Untuk menggunakan atribut ini pada elemen sebaris, Anda harus menyetel atribut tinggi atau lebar objek terlebih dahulu, atau menyetel atribut posisi ke absolut, atau menyetel atribut tampilan ke blok.
4. luapan, luapan-x, luapan-y
Ini tidak secara ketat mengontrol gaya pembungkusan baris, tetapi menyetelnya ke tersembunyi dapat melengkapi kekurangan pembungkusan kata pada waktu-waktu tertentu, misalnya Anda ingin menampilkan hanya satu baris teks dalam lebar terbatas, tetapi panjang baris ini teks melebihi lebar ini, dikombinasikan dengan spasi+teks-overflow dapat mencapai hasil yang lebih baik.
tata bahasa:
overflow: gulir tersembunyi otomatis terlihat
Nilai:
terlihat: Nilai default. Tidak memotong konten atau menambahkan scrollbar. Jika nilai default ini dideklarasikan secara eksplisit, objek akan dipotong ke dimensi jendela atau bingkai yang memuatnya. Dan pengaturan atribut klip tidak valid
otomatis: Konten objek akan dipotong atau bilah gulir akan ditampilkan bila diperlukan
tersembunyi: Jangan menampilkan konten yang melebihi ukuran objek
gulir: selalu tampilkan bilah gulir
menjelaskan:
Mengambil atau mengatur bagaimana konten objek dikelola ketika melebihi tinggi dan lebar yang ditentukan.
Nilai default untuk semua objek terlihat, kecuali objek textarea dan objek body, yang nilai defaultnya adalah otomatis. Menyetel nilai properti objek textarea ke tersembunyi akan menyembunyikan bilah gulirnya.
Untuk tabel, jika atribut tata letak tabel disetel ke tetap, objek td mendukung atribut overflow dengan nilai default tersembunyi. Jika diatur ke gulir atau otomatis, konten yang melebihi ukuran td akan dipotong. Jika disetel ke terlihat, ini akan menyebabkan teks tambahan meluap ke sel di kanan atau kiri (tergantung pada pengaturan properti arah).
Properti ini tersedia pada platform MAC yang dimulai dengan IE5.
Dimulai dengan IE6, atribut ini dapat diterapkan ke objek html ketika Anda menentukan mode yang sesuai standar menggunakan deklarasi !DOCTYPE.