cari

CSS3 文本换行

Feb 18, 2017 pm 02:44 PM

文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择在半角空格或连字符处换行。例如中文,浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了,会出现撑破容器的现象,很难看,如下图
CSS3 文本换行

容器定宽150px的前提下,普通文字如左图浏览器足以胜任自动换行,右图遇见长单词或URL,浏览器就力不从心了。当然,你能为容器设置overflow:auto;,让滚动条出现,以避免撑破容器。或干脆overflow:hidden;让超出部分隐藏,见下图
CSS3 文本换行

但总感觉overflow不太理想,应该有换行专用的属性。本篇就介绍一下3种换行的属性

word-wrap
word-break
white-space
word-wrap
word-wrap能实现断词换行。可设normal,break-word。默认值normal等于没设,不赘述。break-word允许断词换行。如右图设了word-wrap: break-word;后,浏览器的执行过程:发现长单词显示不下,根据默认的换行规则,用半角空格换行,因此Ooops too后面空出了一段空白,长单词移到第二行发现仍旧显示不下,于是断词换行,长单词和URL因此被中间截断。

CSS3 文本换行

word-break
word-break可以设置浏览器自动换行的方式。可设normal,break-all,keep-all。默认值normal等于没设,不赘述。break-all将浏览器的换行模式设为根据容器尺寸允许断词换行。和上面word-wrap: break-word;有什么区别呢?看下图,蓝线部分。

CSS3 文本换行

左图word-wrap的break-word是沿用浏览器默认的换行方式,因此“Ooops too”后面空出了一段空白,上面有解释,不赘述。右图word-break的break-all是改变浏览器默认的换行方式,让浏览器无视半角空格,直接根据容器尺寸换行,因此遇到长单词时,直接断词换行。效果上看word-break: break-all;比word-wrap: break-word;更节省页面空间。

keep-all不允许断词,在英语系情况下等同于normal,等同于没有设。在中日韩文情况下,normal和keep-all有区别,见下图

CSS3 文本换行

中日韩文情况下,normal仍旧等于没有设,浏览器选择在文字或标点符号处换行。但设成keep-all后,将不再允许断词(哪怕是中日韩文),只能像英语系一样根据半角空格或标点来换行。
white-space

white-space设置空白符和换行符。可设默认值normal,可设pre, nowrap,pre-line,pre-wrap。效果见下图

CSS3 文本换行

   //xxx替换相应的值
Ooops       too    loooooooooooooooooooooong!

首先胜出四场的球队将获得NBA总冠军。


normal,浏览器默认会忽略多余空白符(要想显示多个空白符,请用 代替空格键)和换行符。

pre会保留空白符和换行符,相当于

标签。要消除第一行这个换行符,常见在HTML端改成下面这样以便去掉多余空行

Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。

//或者

Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。


nowrap和normal的区别是,它不会自动换行。当你用text-overflow属性时需要配合white-space: nowrap;和overflow: hidden;才能起作用

pre-line会忽略多余空白符(要想显示多个空白符,请用 代替空格键),但保留换行符,会自动换行

pre-wrap和pre-line的区别是,它会保留多余空白符

总结

标签里展示源代码时,遇到有url属性时会很长,导致撑破页面(尤其是移动端),可以用white-space: pre-wrap;加上word-wrap: break-word;

标签外常见的强制换行方式是overflow:hidden;加上word-wrap: break-word;

强制不换行可以white-space: nowrap;加上word-break: keep-all;


更多CSS3 文本换行 相关文章请关注PHP中文网!

Kenyataan
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
Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Apr 18, 2025 am 11:34 AM

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Bolehkah anda bersarang @media dan @support pertanyaan?Bolehkah anda bersarang @media dan @support pertanyaan?Apr 18, 2025 am 11:32 AM

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Cache Cache PantasCache Cache PantasApr 18, 2025 am 11:23 AM

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Dalam mencari timbunan yang memantau kualiti dan kerumitan CSSDalam mencari timbunan yang memantau kualiti dan kerumitan CSSApr 18, 2025 am 11:22 AM

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiDatalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiApr 18, 2025 am 11:08 AM

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Persidangan Depan di ZürichPersidangan Depan di ZürichApr 18, 2025 am 11:03 AM

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Membina aplikasi tanpa pelayan penuh dengan pekerja CloudflareMembina aplikasi tanpa pelayan penuh dengan pekerja CloudflareApr 18, 2025 am 10:58 AM

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Membuat Laluan Dinamik dalam Aplikasi NUXTMembuat Laluan Dinamik dalam Aplikasi NUXTApr 18, 2025 am 10:53 AM

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil

See all articles

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)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

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

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.