Rumah hujung hadapan web html tutorial css 自动换行 word-break:break-all和word-wrap:break-word

css 自动换行 word-break:break-all和word-wrap:break-word

Jun 01, 2016 am 09:53 AM
css word-wrap Pembalut talian automatik

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。 word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word 参数: normal : 允许内容顶开指定的容器边界 break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。

我在网站上试验过确实不支持,你可以再W3C验证一下
Salin selepas log masuk

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah fon yang dikodkan yang digunakan dalam gambar? Bagaimana cara menggunakan gaya fon ini dalam projek? Apakah fon yang dikodkan yang digunakan dalam gambar? Bagaimana cara menggunakan gaya fon ini dalam projek? Apr 05, 2025 pm 05:06 PM

Pengenalan dan penggunaan fon yang dikodkan dalam pengaturcaraan dan reka bentuk web, memilih fon yang betul dapat meningkatkan kebolehbacaan dan estetika kod. Terkini, ...

Bagaimana untuk menyesuaikan kesan hover baris gabungan di El-Table? Bagaimana untuk menyesuaikan kesan hover baris gabungan di El-Table? Apr 05, 2025 pm 06:54 PM

Bagaimana untuk menyesuaikan kesan hover baris gabungan di El-Table? Menggunakan elemen ...

Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web? Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web? Apr 05, 2025 pm 10:33 PM

Menggunakan fail font yang dipasang di laman web baru -baru ini, saya memuat turun fon percuma dari internet dan berjaya memasangnya ke dalam sistem saya. Sekarang ...

Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur? Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur? Apr 05, 2025 pm 10:54 PM

Melaksanakan kesan paparan secara beransur -ansur memendekkan teks dalam reka bentuk web, bagaimana untuk mencapai kesan paparan teks khas untuk menjadikan panjang teks secara beransur -ansur memendekkan? Kesan ini ...

Apa itu & lt; angka & gt; elemen dalam CSS untuk? Apa itu & lt; angka & gt; elemen dalam CSS untuk? Apr 05, 2025 pm 04:51 PM

Apakah unsur -unsur dalam CSS? Semasa pembelajaran dan menggunakan CSS, anda mungkin menghadapi beberapa elemen HTML yang kurang biasa, seperti ...

Bagaimana cara menggunakan 'Jingnanmai Round' yang dipasang di laman web tanpa memuatkan fail fon? Bagaimana cara menggunakan 'Jingnanmai Round' yang dipasang di laman web tanpa memuatkan fail fon? Apr 05, 2025 pm 04:54 PM

Cara Menggunakan Fail Font Dipasang di Laman Web dalam Pembangunan Web, Kadang -kadang kita akan menghadapi situasi di mana kita perlu menggunakan fon tertentu yang dipasang di komputer kami ...

Bagaimana cara menyesuaikan gaya hover dan logik baris yang digabungkan dalam elemen elemen? Bagaimana cara menyesuaikan gaya hover dan logik baris yang digabungkan dalam elemen elemen? Apr 05, 2025 pm 07:45 PM

Bagaimana untuk menyesuaikan gaya hover dan logik baris yang digabungkan di El-Table? Menggunakan elemen ...

Bagaimana cara menggunakan kumpulan peralihan reaksi untuk mencapai kesan penukaran komponen reaksi yang ketat dari kanan ke kiri? Bagaimana cara menggunakan kumpulan peralihan reaksi untuk mencapai kesan penukaran komponen reaksi yang ketat dari kanan ke kiri? Apr 05, 2025 pm 08:03 PM

Mengenai masalah menggunakan kumpulan peralihan React untuk mencapai kesan peralihan komponen dalam React. Apabila menggunakan projek pembangunan React, kita sering perlu melaksanakan beberapa aliran ...

See all articles