Bagaimana untuk mencapai melebihi pemecahan baris dalam css

Dalam reka bentuk dan pembangunan web, masalah biasa ialah penyesuaian teks atau gambar kepada bekas dengan lebar tertentu. Dalam kebanyakan kes, elemen ini akan mengecut atau meregang secara automatik agar sesuai dengan lebar bekas induknya. Walau bagaimanapun, apabila kandungan elemen melebihi lebar bekas induknya, anda perlu menggunakan sifat "overflow-wrap" dalam CSS.

Fungsi melebihi pembalut baris adalah untuk melaksanakan pembalut talian automatik paksa dalam bekas lebar yang ditentukan apabila kandungan elemen tidak boleh dibaca atau lengkap, menjadikan kandungan lebih cantik dan lebih mudah dibaca.

Terdapat dua nilai atribut untuk melebihi pemisah baris: "normal" dan "perkataan putus".

Lalai , teks dalam elemen dibalut secara automatik agar sesuai dengan saiz bekas lebarnya. Dalam kes ini, teks dipecahkan pada sempadan perkataan, mengekalkan integriti ruang sebelum dan selepas.

1. kata putus

Jika atribut kata putus ditetapkan, teks akan pecah pada mana-mana huruf atau nombor, memaksa pembungkusan perkataan. Ini adalah sifat yang sangat berguna, terutamanya jika anda ingin memastikan bahawa beberapa perkataan panjang atau kandungan URL tidak melebihi skop bekas.

2. Yang berikut akan menggunakan beberapa contoh untuk menunjukkan cara mencapai pembungkusan luar talian.

Melaksanakan pemisah baris untuk perkataan panjang

Berikut ialah perenggan dengan perkataan panjang yang tidak melebihi had lebar bekas:

Dalam bekas Apabila lebarnya kecil, teks tidak akan dibalut secara automatik. Untuk menyelesaikan masalah ini, kami menggunakan atribut pembalut garis luar:

Kesannya adalah seperti berikut:

<p>
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

<p style="overflow-wrap: break-word;">
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

Mencapai garisan pembungkusan limpahan teks

Berikut ialah perenggan yang tidak melebihi had Apabila ia melebihi lebar bekas, teks akan melimpah:

2. Dalam kes. lebar bekas yang lebih kecil, kandungan akan dipotong atau melebihi lebar bekas . Untuk menyelesaikan masalah ini, kami menggunakan atribut beyond newline:

Kesannya adalah seperti berikut:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

<p style="overflow-wrap: break-word;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

Dalam sesetengah kes, menggunakan beyond newline atribut boleh berkesan Membantu anda menyelesaikan masalah melebihi lebar bekas dan menjadikan reka bentuk web anda lebih cantik dan mudah dibaca.

Atas ialah kandungan terperinci Bagaimana untuk mencapai melebihi pemecahan baris dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!