强制转移与强制不变更策略
不包和包强制曾经困扰着我,开始的时候,我遇到一个换行符,是痛苦记忆的问题,现在终于把这个痛定思痛,一鼓作气解决问题做了长期顽固。
强制性和强制不变更所使用的财产
我们一般控制在三个CSS属性:自动换行;三字;white-space.these性能可以说是为了打破文本创造的。首先我们必须要知道的三个属性都做。
换行语法:
自动换行:正常(默认)|断词
所有浏览器都能识别
参数:
正常:允许内容在指定的容器边界上。
中断词:内容将在边界中更改。必要时,可以触发单词中断(请注意:请区分单词中断和断词,它们是不同的东西,一个用于属性和一个参数)。
解释uff1a
单词换行是控制单词是否中断;在指定的容器边界或断开开关上设置或检索当前行。在中文中没有问题,英语句子没有问题。但对于一长串英语,它不起作用。
实例uff1a
单词祝贺属于英语,长长的列表:打破这个词作为一个整体,如果最终的宽度不足以显示整个单词,它会自动把文字变成线下,这不是文字截断,一长串的单词不起作用的解释。自动换行:正常是默认的,和英文不拆卸。
结论:
作用域仅为div的标准块级元素,TH、TD的表元素虽然识别但没有效果(如果TD、TH和Word包在宽度IE中是能够起作用的,但根据完全兼容方便的内存透视或前面的结论)。
字中断语法:
字:正常打破所有保留所有| |(默认)
Firefox和Opera无法识别
参数:
正常:允许根据亚洲和非亚洲语言的文字规则改变文字行数。
打破所有:在亚洲语言是正常的。它也允许断开非亚洲语言银行的任何字。这个值是适合亚洲文本包含一些非亚洲文本。
保留所有:与所有非亚洲语言一样,汉语、韩语和日语是不允许断开连接的。它适用于包含少量亚洲文本的非亚洲文本。
解释uff1a
单词中断:打破所有,这是一个不连贯的单词。在边界的单词中,下一个字母自动转到下一行。主要问题是解决长串英语的问题(只是为了弥补单词包的缺陷:断词在长串单词中不起作用)。
实例uff1a
继续走字祝贺在一长串的英文字:打破所有,它将削减的话,和结束的路线将成为孔拉迪后部(祝贺的前面部分)和下一步的行动tulation(conguatulation)。
字折:保留所有,指汉语、日语和韩语的连续词,也就是说,只有在这个时候,不用换行,汉语不会变。
结论:
作用范围仅为div标准块级元素,如TH和TD。虽然表元素被识别,但它们没有效果(单词中断:在测试Chrome中所有的中断都是有效的,但是根据完整的兼容性和方便的内存,前一个结论是相同的)Firefox,Opera无法识别单词中断,更不用说Firefox下的字,以及TD中单词中断的效果。
空白语法:
白色空间:正常预nowrap | |(默认)
参数:
正常:默认。空白将被浏览器忽略。
浏览器将保留空白:它的行为类似于HTML中的预标记。
nowrap:文本没有变化,和文字将继续在同一行,直到遇到br标签。
解释uff1a
对于前期物业,实际上是多个空白连续符号HTML将被合并,为了不让他(最常见的场合是代码的文本缩进的空格表示)让没有更多的美国风格和标签来控制它的压痕和包裹需要持续的预标记。原理是内部默认有一个白色的空间一样:预。
对于nowrap属性,这是强制性的非变化的核心,和一般的强制性非改变这个属性的使用。在Firefox的div和TD没有问题,以及在IE中唯一缺失的div是存在问题之一。如果TD不TD没有指定宽度,nowrap仍然有效。如果TD的宽度,并在文中没有任何标点符号,没有空间,如中国的长字符串,不换行将不再工作。解决的办法是加字:保持所有;你可以解决这个问题。
强制转让概述:
如果这种标准的div块级元素回车,最常见的解决方案是换行:断词;词的突破:打破所有;缺点是,如果你最终会导致广泛的英语单词的字符串,然后的话会被尴尬的风格(和FF不认识字的突破,但不会撕裂这个词)。个人认为,如果你把div的URL地址列表类似的长,所以这种方法是一个很好的选择(注:因为FF不认得的字断,所以我不能保证在每一行的结尾将打开网址的话整齐,但也是一种无奈的选择),如果不是英语的长字符串,可以断开,如URL,但英语的句子,然后用自动换行:在线自动换行break-word.as:打破的话,溢出:隐藏的,据说可以用IE和FF兼容,但它似乎没有任何特殊的作用后,个人测试。当然,如果你有一个更好的计划,你也可以留言参与讨论,你在这里很受欢迎。
如果是在TD,表日需要包装的强制性内容,我推荐的方法:第一套表布局:固定的,为什么要设置这个属性可以参考我的拿什么拯救你,我的表的文章,里面有比较详细的说明。基本上,在设置这个属性,基本的换行问题可以不表TD或发生解决,因为每一部分内容的数量将利用其他TD和TH的宽度会发生。如果你仍然有一个强制更换问题,加一层DIV里面的TD,那么情况将得到解决,如上面所讨论的。
总结强制不变更:
强制性非线变更问题更容易分析。如上所述,使用白色的空间是没有问题的:不换行,Firefox的div和TD,和DIV在IE中只是有一个问题:如果在TD TD不指定宽度,nowrap仍然有效。如果TD的宽度,并在文中没有任何标点符号,没有空间,如中国的长字符串,不换行将不再工作。解决的办法是加字:保持所有;你可以解决这个问题。集成的、更安全的做法是建立文本和TD之间的一层div,然后使用nowrap,然后是强制性的不改变线。注意,在这个时候,它是可能的,太多的文字会导致溢出容器,所以你必须添加一个溢出:隐藏防止溢出容器,所以它可以兼容所有浏览器。
总结了这么多,似乎已经发现,在平衡各种浏览器兼容性的几个性质,现在似乎没有一个完美的解决方案可以完全兼容所有浏览器,我们最多能做的是尽可能保持一致的浏览器显示。如果你仍然认为你必须与所有浏览器兼容,那么最终的计划是使用JS。在以后的文章中,我将从最低JS成本考虑这个请求,但这不在本文的讨论范围之内。