Atoz CSS Tip Pantas: Menggunakan janda dan rehat garis-tutorial css-php.cn

AtoZ CSS Quick Tip: Using Widows and Line Breaks

mata utama

untuk memaksa pembungkus garis, kerana ini akan menyebabkan teks kelihatan tidak konsisten di bawah saiz skrin yang berbeza. CSS disyorkan untuk mengawal jarak dan rehat garis, yang memberikan kawalan dan fleksibiliti yang lebih baik. <code>
untuk memaparkan atau menyembunyikan garis baru. Menetapkan <code>display tidak akan menghasilkan rehat garis, manakala <code>display: none akan menghasilkan rehat garis. Bersempena dengan pertanyaan media, rehat talian boleh diaktifkan atau dilumpuhkan di bawah saiz skrin tertentu. <code>display: block
) antara dua perkataan terakhir. Ini memastikan bahawa dua perkataan terakhir diproses sebagai satu perkataan, mewujudkan kesan pemecahan garis yang lebih indah. <code>

Artikel ini adalah sebahagian daripada siri Atoz CSS. Anda boleh mencari artikel lain dalam siri ini di sini.

Selamat datang untuk membaca artikel seterusnya dalam siri Atoz CSS! Dalam siri ini, saya akan meneroka pelbagai nilai CSS (dan sifat) yang bermula dengan huruf yang berbeza dalam abjad. Kami tahu bahawa kadang -kadang tangkapan skrin tidak mencukupi, dan dalam jawatan ini saya telah menambah tip/kursus cepat untuk memanfaatkan garis baru dan mengelakkan garis janda. W mewakili garis janda dan rehat garis

"Widow's Row" merujuk kepada perkataan yang wujud secara berasingan pada akhir perenggan atau tajuk.

Apabila perkataan terakhir dalam baris teks pecah ke baris baru kerana lebar yang tidak mencukupi, kata -kata individu ini akan muncul.

Sekurang -kurangnya satu baris mempunyai dua perkataan yang lebih indah visual, dan garis janda ini sering dianggap tidak diingini. Agensi yang saya bekerja sekali lagi sangat pemilih tentang mereka bahawa saya mempunyai sedikit gangguan obsesif-kompulsif yang mereka tidak muncul-tidak banyak dalam perenggan teks, tetapi dielakkan sebanyak mungkin dalam tajuk.

Berikut adalah beberapa petua untuk mengeluarkan garisan janda dan mengendalikan garis baru.

Elakkan menggunakan

tag untuk memaksa bungkus garis. <code>

Kami boleh memaksa rehat garis dengan menambah tag pemecahan garis ke dokumen HTML dan pastikan teks itu dengan cara yang menyenangkan.

<h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

Salin selepas log masuk

Ini mungkin kelihatan hebat pada peranti skrin lebar, tetapi jika skrin lebih sempit, rehat garis mungkin muncul di tempat yang salah, menyebabkan teks kelihatan pecah. Contohnya:

ini boleh berlaku jika lebar yang tersedia hanya boleh memegang rentetan "Ini adalah tajuk yang sangat panjang," Perkataan "harus" secara semulajadi akan membungkus garis, dan kemudian dipaksa

<code>这是一个很长的标题，
应该
在这里换行</code>

Salin selepas log masuk

akan menyebabkan "bungkus garis di sini" untuk membentuk garis sahaja.

<code> tidak begitu baik.

jangan gunakan

tag untuk jarak

<code> Ini adalah sesuatu yang saya lihat banyak pelajar baru. Mereka hanya belajar HTML dan mahu mula memisahkan sesuatu dari satu sama lain;

Ini boleh dilakukan dengan menambahkan garis kosong secara manual menggunakan tag <code> , tetapi jarak harus selalu dikendalikan oleh CSS. Atribut <code>margin memberikan kawalan yang lebih baik daripada menambahkan baris baru menggunakan tag <code> , HTML digunakan untuk kandungan, bukan gaya.

Bilakah saya boleh menggunakan tag <code> ?

Secara umum, saya cuba mengelakkan menggunakan tag <code> .

Saya benar -benar menggunakan garis baru hanya apabila menandai puisi (walaupun tag <code><code> di sini mungkin lebih baik untuk memelihara semua garis baru dan inden). Tempat lain adalah ketika menandakan alamat e -mel.

我还曾在网站页脚的段落中使用它们，作为快速添加版权信息的简便方法。

Saya juga telah menggunakannya dalam perenggan footer laman web sebagai cara mudah untuk menambah maklumat hak cipta dengan cepat.

<h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

Salin selepas log masuk

<code>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。 <code> Adakah ini melanggar peraturan saya mengenai reka bentuk gaya tanpa menggunakan rehat talian? Mungkin. Saya akan mengkritik diri saya.

<code>display: none

Gunakan

Sembunyikan Newlines

<code>一个 <code> <shop> a <code>标签的作用并不大（除了强制换行），并且没有任何视觉特征——你无法看到它们，它们没有任何形状、大小或颜色等等。 <code> tags tidak begitu berguna (kecuali untuk rehat garis paksa), dan tidak mempunyai ciri visual - anda tidak dapat melihatnya, mereka tidak mempunyai bentuk, saiz atau warna, dll.

<code>但是，您可以向其中一个添加一个类，并使用 Walau bagaimanapun, anda boleh menambah kelas kepada salah satu daripada mereka dan menukar keupayaan membungkus baris menggunakan paparan <code> harta. <code>属性切换其换行能力。

设置 Tetapan paparan: Tiada <code>将不会导致换行。设置 paparan: Blok <code> akan menyebabkan rehat garis. Ini kadang -kadang berguna apabila digunakan dengan pertanyaan media, membolehkan atau melumpuhkan rehat talian untuk saiz skrin tertentu. <code>将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。

<code>这是一个很长的标题，
应该
在这里换行</code>

Salin selepas log masuk

这些代码片段将允许文本在窄屏幕设备上作为单行流动，但对于大屏幕，换行将可见，版权文本将显示在两行上。

Coretan kod ini akan membolehkan teks mengalir sebagai satu baris pada peranti skrin sempit, tetapi untuk skrin besar, rehat talian akan kelihatan dan teks berhak cipta akan dipaparkan pada dua baris.

<code> Gunakan

penyingkiran fleksibel janda

3 mesti apa yang hendak digunakan? <code>回到我们这篇文章的开头，如果我们不应该使用 <code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？ <code> Nah, menyertai dua perkataan terakhir dalam tajuk tanpa watak -watak ruang pecah garis adalah cara yang lebih fleksibel untuk memastikan bahawa teks mengalir dan garis pecah dengan cara yang menyenangkan secara visual. Sila lihat tag berikut: <code>好吧，用不换行空格字符连接标题中的最后两个单词是确保文本以视觉上令人愉悦的方式流动和换行的一种更灵活的方法。请看以下标记：

<div class="site-footer">
  <p>
    由 Guy Routledge 深情创作<br>
    © 2016 保留所有权利
  </p>
</div>

Salin selepas log masuk

<code>

Saya menambah ruang bungkus bukan baris antara dua perkataan "newline" dan "di sini", yang membuat mereka berkelakuan seperti perkataan, bukannya dua dipisahkan oleh ruang satu perkataan. <code>

我在“换行”和“在这里”这两个词之间添加了一个不换行空格，这使得它们的行为就像一个单词一样，而不是由空格分开的两个单词。

如果屏幕很宽并且有足够的空间让整个标题显示在一行中，一切看起来都很好。

semuanya kelihatan baik jika skrin luas dan ada ruang yang cukup untuk keseluruhan tajuk untuk muncul berturut -turut.

<code>如果减小屏幕宽度，第一个可用的换行点是在字符串“which”和字符串“wraps here”之间。这意味着如果没有足够的空间让整个标题在一行中显示，该行将换到两行，留下最后两个单词独自一行。没有寡妇行，一切看起来都很棒。 <code> <st> Jika lebar skrin dikurangkan, titik pemecahan baris pertama yang tersedia adalah antara rentetan "yang" dan rentetan "bungkus di sini". Ini bermakna jika tidak ada ruang yang cukup untuk keseluruhan tajuk untuk muncul dalam satu baris, garis akan ditukar kepada dua baris, meninggalkan dua perkataan terakhir sahaja. Semuanya kelihatan hebat tanpa janda. </st>

Jika anda ingin melihat bagaimana teknologi ini sebenarnya berfungsi, anda boleh menyemak tajuk di halaman ini menggunakan alat pemaju penyemak imbas. Anda juga boleh cuba mengubah saiz tetingkap untuk melihat bagaimana kata -kata dalam setiap tajuk dibalut. <code>如果您想查看此技术的实际效果，您可以使用浏览器的开发者工具检查此页面上的标题。您还可以尝试调整窗口大小以查看每个标题中的单词是如何换行的。

Soalan Lazim Mengenai garis janda CSS dan Break

Apakah perbezaan antara seorang janda dan orang yang dicuri di CSS?

Dalam CSS, baris janda dan baris anak yatim merujuk kepada baris pada permulaan atau akhir perenggan, tergantung di bahagian atas atau bawah lajur, berasingan dari sisa perenggan. "Baris Widow" merujuk kepada garis pada akhir perenggan, yang jatuh pada permulaan halaman atau lajur seterusnya, dan oleh itu dipisahkan dari seluruh teks. "Orphan" merujuk kepada baris pada permulaan perenggan yang muncul bersendirian di bahagian bawah halaman atau lajur.

Bagaimana untuk mengawal janda dan anak yatim dalam CSS? CSS menyediakan sifat yang dipanggil "janda" dan "anak yatim" untuk mengawal bilangan minimum baris yang boleh ditinggalkan di bahagian atas atau bawah halaman dalam perenggan. Secara lalai, nilai mereka ditetapkan kepada 2, yang bermaksud sekurang -kurangnya dua baris dalam perenggan akan kekal di bahagian atas atau bawah halaman. Anda boleh menyesuaikan nilai -nilai ini seperti yang diperlukan.

Apakah atribut "line-break" dalam CSS?

harta "line-break" dalam CSS menentukan cara membungkus teks Cina, Jepun, atau Korea (CJK). Ia boleh mengambil nilai seperti "auto", "longgar", "normal" atau "ketat". Setiap nilai menentukan cara membungkus garisan dalam situasi yang berbeza, yang membolehkan kawalan ke atas susun atur dan kebolehbacaan teks CJK.

Bagaimana atribut "line-break" mempengaruhi teks bukan CJK?

atribut "line-break" tidak mempunyai kesan pada teks bukan CJK. Untuk teks bukan CJK, rehat garis dikawal oleh atribut "ruang putih" dan atribut "kata-kata".

Bolehkah saya menggunakan sifat "janda" dan "anak yatim" untuk laman web?

Walaupun sifat "janda" dan "anak yatim" adalah sebahagian daripada spesifikasi CSS, mereka pada asalnya direka untuk media paging seperti percetakan. Pada masa ini, hanya beberapa penyemak imbas yang menyokong sifat -sifat ini untuk laman web. Oleh itu, penggunaannya dalam susun atur web adalah terhad dan tidak disyorkan secara meluas.

Apakah alternatif untuk mengawal baris janda dalam susun atur laman web?

Terdapat beberapa teknik untuk mengawal baris janda dalam susun atur laman web. Kaedah yang sama adalah menggunakan ruang pemecahan garis () antara dua perkataan terakhir perenggan. Ini memastikan bahawa dua perkataan terakhir akan berkumpul dan tidak akan dipisahkan. Cara lain adalah untuk menghalang garisan janda secara dinamik menggunakan JavaScript atau JQuery.

Bagaimana untuk mencegah pembungkus baris dalam CSS?

Anda boleh menghalang rehat garis dalam CSS dengan menggunakan harta "ruang putih" dengan nilai "NODRAP". Ini akan menghalang teks daripada membungkus ke baris seterusnya, memaksa ia untuk kekal dalam satu baris.

Bagaimana untuk memaksa rehat garis di CSS?

Ya, anda boleh memaksa pemecahan garis di CSS dengan menggunakan elemen "
" html atau menggunakan atribut "kandungan" dengan nilai "a" dalam "selepas" atau "sebelum" pseudo- elemen.

Bagaimana atribut "line-break" mempengaruhi susun atur teks CJK?

atribut "line-break" memberi kesan ketara kepada susun atur dan kebolehbacaan teks CJK. Sebagai contoh, nilai "ketat" menghalang watak -watak tertentu daripada muncul pada akhir atau permulaan garis, yang boleh menjadikan teks lebih mudah dibaca. Walau bagaimanapun, ia juga boleh menyebabkan lebih banyak panjang yang tidak sekata.

Apakah nilai lalai atribut "line-break"?

Nilai lalai atribut "line-break" adalah "auto". Ini bermakna penyemak imbas akan menentukan peraturan pemecahan garis berdasarkan peraturan pemecahan baris lalai, yang mungkin berbeza antara penyemak imbas.

Atas ialah kandungan terperinci Atoz CSS Tip Pantas: Menggunakan janda dan rehat garis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!