超出宽度后,英文字符和汉字自动换行和不换行的设置

默认设置,一长串英文字符(中间没空格)不会自动换行,比 如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,而汉字字符却可以自动换行。原因 是:英文字母之间如果没有空格,系统认为是一个单词,就不会自动换行。汉字就没有这种情况。


1、在需要强制设置换行时,

td中:

需用css来控制style='word-break: break-all'

div中 :  

div 实现长英文字母自动换行CSS


IE浏览器

#wrap{white-space:normal; width:200px; }

或者

#wrap{word-break:break-all;width:200px;}

Firefox浏览器

#wrap{white-space:normal; width:200px; overflow:auto;}

或者

#wrap{word-break:break-all;width:200px; overflow:auto; }


2、在不需要换行时

style='word-break: keep-all'//不会自动换行,有空格换行,ie支持,ff不支持

要想兼容ie和ff,需设置white-space: nowrap;,这样设置,不论是英文还是汉字,也不管是否有空格都会不换行显示


white-space : normal | pre | nowrap

normal :  默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre :  换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为

standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode,

此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象

nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

兼容性: IE5.5 +, Firefox


另外解释一下

word-wrap和word-break

word-wrap用来控制换行

两种取值:

(1)normal

(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

word-break用来控制断词

三种取值:

(1)normal

(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)

(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)


关于 overflow: hidden;的说明

即使通过css控制了td横向字体隐藏截取,而纵向遇到<br>的情况还是会撑开单元格的高度,ie9好像支持这种效果,而不会撑开单元格的高度

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,667评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,361评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,700评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,027评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,988评论 5 361
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,230评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,705评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,366评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,496评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,405评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,453评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,725评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,803评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,015评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,514评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,111评论 2 341

推荐阅读更多精彩内容