Bagaimanakah Saya Boleh Mewajarkan Baris Terakhir Teks dalam Div Merentasi Semua Pelayar?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mewajarkan Baris Terakhir Teks dalam Div Merentasi Semua Pelayar?

Susan Sarandon

Lepaskan： 2024-12-10 02:21:12

asal

397 orang telah melayarinya

How Can I Justify the Last Line of Text in a Div Across All Browsers?

Wajarkan Baris Terakhir Div

Penjajaran teks lalai untuk baris terakhir

selalunya dijajar ke kiri, walaupun apabila teks selebihnya dibenarkan. Ini boleh mengecewakan, terutamanya jika anda memerlukan baris terakhir untuk dibenarkan atas sebab estetik atau kebolehbacaan.

Penyelesaian Silang Penyemak Imbas

Untuk mewajarkan baris terakhir a

merentas pelbagai penyemak imbas, termasuk IE6 , anda boleh menggunakan CSS berikut:

p, h1 {
  text-align: justify;
  text-align-last: justify;
}

p:after, h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

Salin selepas log masuk

Kaedah ini menggabungkan text-align-last: justify; harta, yang disokong oleh IE, dengan variasi kaedah :selepas pseudo-kandungan. Ia juga termasuk pembetulan untuk mengalih keluar ruang tambahan yang ditambahkan selepas elemen teks satu baris.

Pembetulan Teks Satu Baris

Jika

mengandungi hanya satu baris teks, anda boleh menggunakan CSS berikut untuk menghalang baris kosong tambahan yang mungkin disebabkan oleh penyelesaian sebelumnya:

h1 {
  text-align: justify;
  text-align-last: justify;
  height: 1em;
  line-height: 1;
}

h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

Salin selepas log masuk

Sumber Tambahan

Untuk maklumat lebih terperinci, rujuk kepada:

http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mewajarkan Baris Terakhir Teks dalam Div Merentasi Semua Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk menghidupkan imej latar belakang dengan betul dengan CSS3? Artikel seterusnya：Bagaimanakah Saya Boleh Kawal Susunan Lajur dalam Bootstrap 3 Menggunakan `col-lg-push` dan `col-lg-pull`?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2163

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2313

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1950

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...