word-wrap break-word使文本自动换行

在内容属性那里加上word-wrap: break-word;
如果右边留白太多的话,可以用word-break : break-all;

《使用word-wrap:break-word使文本自动换行》

文本框连续输入
数字”111111111111111111″或者
英文单词”adkjsakfjsalfkjsalkdjaslkfjsalkf”
会造成什么结果呢?—文字溢出,一般的处理方法是用overflow:hidden隐藏文字,有没有更好的解决文案呢?QA的童鞋要求自动换行.

用word-wrap:break-word即可

css手册上的解释
word-wrap
基本特性
兼容性: IE5.5+专有属性
基本语法
word-wrap : normal | break-word
语法取值
normal: 默认值。允许内容顶开指定的容器边界
break-word:内容将在边界内换行。如果需要,词内换行( word-break )也将发生
使用说明
设置或检索当当前行超过指定容器的边界时是否断开转行。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 wordWrap 。

w3c的解释

http://www.w3.org/TR/css3-text/#word-wrap

转自http://www.putaoshu.com/?p=359

《word wrap 解惑》

源起
我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题。在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行。

在现实项目中,尤其是在测试阶段,鉴于测试使用非常极端的测试用例,我们经常需要“修复”如图所示的这个问题:

word-wrap-1

长单词溢出

图中,极长的这个英文单词(虽然是生造的)为了保证完整的显示,无奈地超出了容器的限制,它溢出了。为了“修复”这个“问题”,使得无论东亚还是西欧文字都能被限定在容器的尺寸范围内,我们一般会加上诸如“word-wrap: break-word; word-break: break-all;”这样的属性,令我们满意(好吧,其实是令测试满意)的结果如图所示:

word-wrap-2

长单词被强行断行

从以结果现象为导向的观点出发,这个“bug”被“修复”了,但是在做了三五次这样的重复工作后,我开始产生这样几个疑问:

word-wrap 和 word-break 究竟是什么?
为什么会乐此不疲地重复碰到这个问题?
这个问题是问题么?
规则
在解惑之前,有几个关乎问题本质的客观现实需要指出,因为这些“常识”最容易被人忽视:

CJK 文字和 !CJK 文字有各自的排版规则。

在这里,CJK 代表 Chinese, Japanese, and Korean,即东亚文字,!CJK 就是非东亚文字,大多数情况下是西欧文字。

在文字的呈现规则上,两者很不相同,CJK 文字中,一个字母就是一个字素(单词),独立成义,!CJK 文字中,一些字母组成一个字素,并且字素们由连接符“-”连接,或由空格“ ”分隔。

有关 CJK 文字更多的排版规则上,比较有代表性的是:对中文来说,标点符号不能成为行首(特殊除外);双字长的标点符号(省略号、破折号)不能断开。
对于 !CJK,主要是:单词不能在中间不合法地断开(合法情况例如从连接符处断开);标点符号不能成为行首(特殊除外)
解惑一
word-wrap 和 word-break 究竟是什么?对于这个问题,直接拜访 W3C 官方,找到 CSS3 草案:http://www.w3.org/TR/2010/WD-css3-text-20101005/,再访问微软,借鉴诸如 http://msdn.microsoft.com/en-us/library/ms531184%28VS.85%29.aspx

得出的结论如下:

word-wrap, line-break, word-break 这几个属性都是 MS 的独立实现,随后其他浏览器也不同程度地实现了其中的某些,之后,这几个属性都被吸纳为 CSS3 标准。在对文字排版的渲染上,微软还是走在前面的。

在现有的 CSS3 草案中,关乎到文字排版的几个重要属性有:white-space, text-wrap, word-wrap, line-break, word-break

根据 CSS3 的描述,列出这些属性各自的要点,这部分读者可以跳过……

white-space 是 white-space-collapsing 和 text-wrap 的缩写
属性 设置 white-space-collapsing 设置 text-wrap 空行 空格 文字自动换行 效果
normal collapse normal collapse collapse wrap 忽略多余空行和空格,文字自动换行
pre preserve none preserve preserve no wrap 保留所有空行和空白,文字不自动换行
nowrap collapse none collapse collapse no wrap 忽略多余空行和空格,文字不自动换行
pre-wrap preserve normal preserve preserve wrap 保留所有空行和空白,文字自动换行
pre-line preserve-breaks normal preserve collapse wrap 合并多余空格,保留多余空行,文字自动换行
text-wrap 定义文本的自动换行效果
属性 效果
normal 在允许的断点处自动换行
none 文本不会自动换行;对于不“合身”的容器,文本将会溢出
unrestricted 在任意的文法单词间都可断行,比 normal 的限制要松散很多
suppress 除非断行处没有其他任何允许的断点,方可进行断行,这比 unrestricted 严格,比 normal 松散
word-wrap 执行最激进的单词断行控制,从单词的内部断开以防止文本溢出容器并且完全适应容器的宽度
在 IE 的实际效果中,word-break 的效果要激进得多,它穷凶极恶地断开所有单词(如果到达边界的话)
属性 效果
normal 仅在允许的文本断点处自动换行
break-word 如果一行中没有其他可接受的断点,那么将强行断开文本单词
line-break 是断行的规则,针对东亚文字
基本是针对日文的换行规则
word-break 是断行的规则,针对非东亚文字
属性 效果
normal 根据特定非东亚文字自己的规则来决定是否自动断行
break-all 允许非东亚语言文本行的任意字内断开。该值适合包含一些非东亚文本的东亚文本
keep-all 不允许非东亚语言文本行的任意字内断开。该值适合包含一些东亚文本的非东亚文本
hyphenation 文本会在合适的连字符处断开,这需要浏览器的支持
做一个归纳:专门用于控制文本自动换行功能的属性是 text-wrap 和 word-wrap,而 line-break 和 word-break 用来控制断行和单词边界分隔,根据 W3C 的描述来说,word-wrap 是最激进的自动换行方式,可以强行断开单词。而现实情况是,word-break: break-all; 的方式要更为激进,如图:

word-wrap-3

word-wrap

word-wrap-4

word-break

对比 word-wrap: break-word; 和 word-break: break-all;,两者都将文本限定在了容器的范围内,只是 break-all 将所有单词,不论长短地,通通截断,break-word 则非如此,它尽量地遵从了排版规则。

兼容性
由于几个属性都来自于微软(部分来自于 CSS3),那么理所当然 IE 是支持最良好的,不过对于浮动元素,IE67 的表现会有些 bug(可在文后给出的 demo 中验证)。

至于其他浏览器,FF 3.6 不支持 word-break;Chrome 7 支持良好;Safari 5 同 Chrome;Opera 10 同 FF

解惑二三
碰到相关问题的场景大体是两个:

测试使用了很极端的测试用例(比如 asdfasdfasdfasdfasdfasdfasdf)
IE67 下,在宽度不大的容器中使用了浮动元素,同时浮动元素内包含了长的串,如图:

word-wrap-5

IE67 中浮动盒子杯具

对于场景一,使用 word-wrap: break-word;

对于场景二,使用 IE67 的 hack,word-break: keep-all; 或者用 inline-block 来代替浮动(IE67 中,hasLayout 的 inline 盒子大体等同于 inline-block)

回头看疑问二,我们为什么会乐此不疲地重复碰到这个问题?原则上,各个浏览器默认的文字排版方式已经很好地顾及了 CJK 文字和 !CJK 文字,根据各个语言自己的规则来呈现排版,不应该出现诡异的问题。所以,对于上面的两个问题场景,之所以产生场景一,是因为使用了极端的测试用例,但是在现实中,这种极长的英文单词是根本不存在的(特殊行业除外),又,即使英文单词较长,也不应该突兀地截断,这有违西欧文字的排版规则。所以我认为,如果在现实环境下发生场景一中的问题,责任应该在于版面的设计,比如容器宽度太小,而不是去截断文本;对于场景二,应该归咎于 IE67 的渲染 bug,这时,使用 inline-block 代替,或用 word-break: keep-all; 来给犯错的浏览器擦屁股。

实践方案
对于我们输出的内容(可控的),不使用任何 word-wrap 和 word-break 等属性,对于可能产生的长单词溢出这种小概率事件,首先考虑容器宽度是否合理,其次可以为长单词添加连字符“-”以便合理地断开,最后设置 overflow: hidden; 避免视觉上的溢出。
对于用户输出的内容(不可控的),比如评论等,由于不排除用户会输入“dddddddddddd”这样没营养的垃圾数据,使用 word-wrap: break-word; 来强行截断。
最后的观点
不能完全迁就测试用例,因为有时不合现实情理。
浏览器默认已经做得够好,强加诸如 break-all; 这样的指令是不优雅的。
问题大多不在于实现,而在于设计(如容器太窄)。
对于 bug 浏览器使用 hack 即可,这是它们的错。
相关资源
CSS3 草案:http://www.w3.org/TR/2010/WD-css3-text-20101005/
demo 页面:http://ued.taobao.com/lab/word-wrap/word-wrap.html

转自http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

Chrome强制显示最小字体为12px

要调整字体的时候发现,把字体调整为12px以下的时候,都显示的是12px,不会更低了。不管是设置成pt或者百分比为单位的字体大小都不管用。而在IE、Firefox、Opera、Safari下都是正常显示的。IE的话还可以用CSS HACK来解决,但是谷歌游览器就没有一点办法了。在网上找到了一个解决办法和例子,可以看看你有没有设置成功哦。

font-size:18px;
font-size:17px;
font-size:16px;
font-size:15px;
font-size:14px;
font-size:13px;
font-size:12px;
font-size:11px;
font-size:10px;
font-size:9px;
font-size:8px;
font-size:7px;
font-size:6px;

解决方法

*{
-webkit-text-size-adjust:none;
}

关于ul下li内插入span标签自动换行不在同一行问题

前提,

li span {float:right;}

如果这么写

  • 小戴2009.05.23
  • 这个日期就会窜到下一行去
    而如果这样

  • 2009.05.23小戴
  • 日期和文字就会同行显示
    问题出来了,
    第一:这是为啥呢?
    第二:如何给span定义属性让他能够在第一种html写法下不换行?
    当初来看,比较诡异的现象
    仔细分析一下,原来是这样
    Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,
    浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端
    看下面这个例子就清楚了:

    
    
    
    测试
    
    
    
    加float宽高有作用,
    不加float宽高无作用
    
    
    

    所以,上面的例子应该

    li{position:relative;}
    li span{position:absolute ;right:0px;}
    

    这样来写,如果水平不齐的话
    那么可以用个top来解决

    转自http://blog.csdn.net/showknow/article/details/6730357

    ie6重灾区,微软给点力吧

    ie6在中国的游览器份额还有百分之三十多啊,哎……微软来个给力的吧,直接ie8,不上ie8,黑屏……嘿嘿

    附微软官方的统计http://ie6countdown.com/

    INDEX, NOINDEX, FOLLOW和 NOFOLLOW及优化和特点

    INDEX, NOINDEX, FOLLOW和 NOFOLLOW及优化和特点
    The Robots META tag放于后台HTML源代码的标头区(HEAD区)中。

    我举一个例子:

    <HTML>
    <HEAD>
    <META NAME=”ROBOTS” CONTENT=”NOINDEX,NOFOLLOW”>
    <META NAME=”DESCRIPTION” CONTENT=”THIS PAGE ….”>
    <TITLE>…</TITLE>
    </HEAD>
    <BODY>

    Robot Meta Tag选项:

    在一个Robots Meta Tag 中可使用的指令有四个:INDEX, NOINDEX, FOLLOW和 NOFOLLOW,以“,”分隔。其中:

    INDEX指令:表示Robot可以索引本页;

    FOLLOW指令:表示Robot可以跟踪本页链接;

    NOINDEX指令:表示拒绝Robot索引本页,但可跟踪该页上的链接;

    NOFOLLOW指令:表示拒绝Robot跟踪本页链接,但可索引本页。

    实例:

    <META NAME=”ROBOTS” CONTENT=”INDEX,FOLLOW”>
    <META NAME=”ROBOTS” CONTENT=”NOINDEX,FOLLOW”>
    <META NAME=”ROBOTS” CONTENT=”INDEX,NOFOLLOW”>
    <META NAME=”ROBOTS” CONTENT=”NOINDEX,NOFOLLOW”>

    在一些关于Robots Meta tag的搜索引擎文章中提到说,预定义的缺省设置是INDEX和FOLLOW。然而对Inktomi来说却并非如此。Inktomi的缺省项是INDEX和NOFOLLOW。

    另外还有两个全局指令:ALL和NONE.

    ALL=INDEX,FOLLOW:表示可以索引本页,且可跟踪该页链接;

    NONE=NOINDEX,NOFOLLOW:表示不允许索引本页,

    转载自互联网

    并排的两个div自适应高度

    早就听说布局很麻烦,天天听他们吆喝“定不住啦”“跑啦……”之类的。今天也实验了一小把,也没那么困难吧,嘿嘿。只是最后这个“并排的两个div自适应高度”有点难搞,无奈求助于无敌的搜索引擎,解决之……

    网上应该还有很多办法,听说的有纯CSS方法、js实现div自适应高度。可是我没一个试验成功的。想来应该是可以的,高手快现身赐教吧- -!嘿嘿 阅读详细 »

    用于显示隐藏内容的demo

    准备做一个小静态网站,其中要做一个答题的功能,类似于英语的完形填空,点显示答案按钮以后,可以显示答案在上面,由于还没学过javascript,这个小功能也得请教同学啦。展示如下:

    ————–代码————–

    
    
    click the button below and you can see the answer in the answer field
    

    • What's my Name?
    • the answer is:

    ————–展示————–

    click the button below and you can see the answer in the answer field


    • What’s my Name?
    • the answer is:

    网页加载进度显示功能

    首先要给网页加上进度条的代码。如 aw 所言,进度条的位置很重要。如果你的 <head> 部分要加载的东西太多,导致网页迟迟显示不出来,那进度条也没必要加了。用户可能等不及进度条显示出来就关闭页面了。针对这个问题,我作了手动的优化,让自己的页面在 <head> 部分只加载 CSS 和 favicon,至于 javascript 统统挪到后面。这样打开网页的时候就能迅速地显示出进度条,起到提示的作用。

    HTML 代码我加在 <body> 的后面了,内容如下,这个“载入中”的提示也可以用 Javascript 输出(有利于SEO)

    <div id=”progressbar”>
    <span id=”progressdone”></span>
    <span id=”progressing”></span>
    <span id=”progresstip”>载入中&hellip;</span>
    </div> 阅读详细 »