转一个关于英文自动断行有关问题的贴子

2012-11-12

转一个关于英文自动断行问题的贴子转自：http://maymei.ycool.com/post.1696872.html?trtdabcdefghigkl

转一个关于英文自动断行问题的贴子

转自：http://maymei.ycool.com/post.1696872.html

<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果：隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行

3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"? style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>

效果：隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后，这种现象出现的几率很小，但是不能排除网友的恶搞。如果有什么问题请到我的留言本提出

下面是提到的例子的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>

<h1><code>IE \ word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE \ word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"? style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>

word-wrap同word-break的区别

word-wrap:
normal??Default.?Content?exceeds?the?boundaries?of?its?container.?
break-word?Content?wraps?to?next?line,?and?a?word-break?occurs?when?necessary.?必要时会触发word-break。

word-break:
normal??Default.?Allows?line?breaking?within?words.?好像是只对Asian?text起作用。
break-all?Behaves?the?same?as?normal?for?Asian?text,?yet?allows?the?line?to?break?arbitrarily?for?non-Asian?text.?This?value?is?suited?to?Asian?text?that?contains?some?excerpts?of?non-Asian?text.?
keep-all?Does?not?allow?word?breaking?for?Chinese,?Japanese,?and?Korean.?Functions?the?same?way?as?normal?for?all?non-Asian?languages.?This?value?is?optimized?for?text?that?includes?small?amounts?of?Chinese,?Japanese,?or?Korean.?

总结如下：
word-wrap是控制换行的。
使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

break-word是控制是否断词的。
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
keep-all，是指Chinese,?Japanese,?and?Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

ie下：
使用word-wrap:break-word;所有的都正常。

ff下：
如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。
为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。

目前主要的问题存在于?长串英文?和?英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。
对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。
用：overflow:auto;?ie下，长串会自动折行。ff下，长串会被遮盖。

所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。

另，测试代码如下：

1.htm===================================================================

.c1{?width:300px;??border:1px?solid?red}
<div?"就可以自动换行
现在问题就好办了,只要替换" "为" "就可以,但是现在有个问题浏览器一般来说会把多个" "看成一个 " "所以我们只需要换个 就可以了,否则的话原来的排版可能会出现问题,因此我用正则表达式替换在字母前面的一个空白" "来实现此功能
实现方法如下
str.replace(/ (?=\w)/ig," ");
就这么简单,现在测试英文会自动换行,而且不会被强行截断了
总结
在宽度固定的情况下,默认时中英文都可以自动换行的
而有时英文不能自动换行的原因是因为有 变成空白的原因
浏览器不把 看出单词的分界符号,所以不换行,用替换一个 为空白的方法可以实现原来的功能

具体js函数如下
<script? language="JavaScript">
aa="english   english english english"
document.write(aa);
document.write("<hr>");
function get_blank(str){
return str.replace(/ (?=\w)/ig," ");
}
document.write(get_blank(aa))
</script>
可以看出一般情况下,两个输出完全一致,而有表格的情况下,第二个输出会自动换行

热点排行

Web前端

转一个关于英文自动断行有关问题的贴子