CSS文字換行詳細解說

2021-08-24 23:53:18 字數 994 閱讀 6741

本文列舉了相容 ie 和 ff 地換行 css 推薦樣式,詳細介紹了word-wrap同word-break地區別.相容 ie 和 ff 地換行 css 推薦樣式:

最好地方式是

word-wrap:break-word; overflow:hidden;

而不是word-wrap:break-word; word-break:break-all;

也不是word-wrap:break-word; overflow:auto;

這種最好地方式,在 ie 下沒有任何問題,在 ff 下,長串英文會被遮住超出地內容.

技術總結:

word-wrap是控制換行地.

使用break-word時,是將強制換行.中文沒有任何問題,英文語句也沒問題.但是對於長串地英文,就不起作用.

break-word是控制是否斷詞地.

normal是預設情況,英文單詞不被拆開.

break-all,是斷開單詞.在單詞到邊界時,下個字母自動到下一行.主要解決了長串英文地問題.

keep-all,是指chinese, japanese, and korean不斷詞.即只用此時,不用word-wrap,中文就不會換行了.(英文語句正常.)

ie下:

使用word-wrap:break-word;所有地都正常.

firefox下:

如這2個都不用地話,中文不會出任何問題.英文語句也不會出問題.但是,長串英文會出問題.

為了解決長串英文,一般用word-wrap:break-word;word-break:break-all;.但是,此方式會導致,普通地英文語句中地單詞會被斷開(ie下也是).

目前主要地問題存在於 長串英文 和 英文單詞被斷開.其實長串英文就是乙個比較長地單詞而已.即英文單詞應不應該被斷開那?那問題很明顯了,顯然不應該被斷開了.對於長串英文,就是惡意地東西,自然不用去管了.但是,也要想些辦法,不讓它把容器撐大.

用:overflow:auto; ie下,長串會自動折行.firefox下,長串會被遮蓋.

CSS文字換行詳細解說

本文列舉了相容 ie 和 ff 地換行 css 推薦樣式,詳細介紹了word wrap同word break地區別.相容 ie 和 ff 地換行 css 推薦樣式 最好地方式是 word wrap break word overflow hidden 而不是word wrap break word ...

CSS文字換行詳細解說

本文列舉了相容 ie 和 ff 的換行 css 推薦樣式,詳細介紹了word wrap同word break的區別。相容 ie 和 ff 的換行 css 推薦樣式 最好的方式是 word wrap break word overflow hidden 而不是word wrap break word ...

浮動詳細解說 CSS 04

一 浮動 1.1css布局的三種機制 1 普通流 標準流 2 浮動 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示 3 定位 讓盒子定在瀏覽器的某乙個位置 css離不開定位,特別是後面的js特效 1.2為什麼需要浮動 如何讓多個盒子水平排列成一行?如何讓盒子左右對齊?行內塊元素有缺陷 1 它...