Bagaimana untuk mencapai teks css melebihi pemisah baris

Teks CSS melebihi pembalut baris

Dalam reka bentuk web, kami sering menghadapi situasi di mana kandungan teks melebihi bekas induk. Pada masa ini, kita perlu menggunakan CSS untuk menyelesaikan masalah ini. CSS menyediakan beberapa sifat untuk mengawal pembalut baris dan pemotongan teks Artikel ini akan memperkenalkan penggunaan sifat dan kes praktikal ini.

1. Pembalut teks

Apabila kandungan teks melebihi bekas induk, kami boleh mengawal kaedah pembalut teks untuk membungkusnya secara automatik dalam bekas induk. Berikut ialah atribut CSS yang biasa digunakan:

1. word-wrap

Atribut ini digunakan untuk menentukan sama ada untuk membenarkan pemisah baris dalam perkataan Lalai adalah normal. Apabila nilai atribut ini ialah kata putus, jika panjang sesuatu perkataan melebihi lebar bekas, perkataan itu akan dipecahkan dan dibalut secara automatik.

2. patah perkataan

Atribut ini digunakan untuk menentukan cara perkataan dipecahkan. Apabila nilai atribut ini adalah pecah-semua, walaupun satu perkataan akan dipecahkan walaupun ia tidak melebihi lebar bekas.

Berikut ialah contoh:

.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}

<div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div>

2 Pemangkasan teks

Apabila kita perlu mengehadkan panjang teks dan bukannya membiarkannya membungkus, tekskan. boleh digunakan Dipotong. Berikut ialah beberapa sifat CSS yang biasa digunakan:

1. limpahan

Sifat ini digunakan untuk menentukan cara kandungan dalam bekas induk akan bertindak apabila ia melebihi saiz bekas. Lalai boleh dilihat. Kita boleh menetapkannya kepada tersembunyi, yang bermaksud bahagian di luar kandungan akan disembunyikan; atau menetapkannya untuk menatal, yang bermaksud bar skrol akan dipaparkan.

2. text-overflow

Atribut ini digunakan untuk menentukan cara memaparkan teks apabila ia melimpah. Lalai ialah klip. Kita boleh menetapkannya kepada elipsis, yang bermaksud bahawa elips akan ditambah secara automatik apabila teks melimpah.

3. ruang putih

Atribut ini digunakan untuk mengawal cara ruang putih dalam elemen diproses. Kita boleh menetapkannya kepada nowrap, yang bermaksud bahawa teks tidak seharusnya dibalut melainkan teg "br" ditemui.

Berikut ialah contoh:

.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}

<div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会被截断并自动加上省略号。</p>
</div>

Di atas ialah penyelesaian untuk teks CSS yang melebihi pemisah baris. Saya harap ia dapat membantu semua orang. Dalam proses pembangunan sebenar, kita boleh memilih atribut yang sesuai mengikut keperluan sebenar untuk mencapai hasil yang terbaik.

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