`

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

IEFirefox浏览器CSS正则表达式 
阅读更多

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

 

css之自动换行 


 
 
 
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法


对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：可以实现换行

2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条


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

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">
<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===================================================================

<style>
.c1{ width:300px;  border:1px solid red}
.c2{ width:300px;word-wrap:break-word;  border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all;  border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all;  border:1px solid black}
.c6{ width:300px;word-break:keep-all;  border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto;  border:1px solid yellow}
</style>

.c1{ width:300px;  border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c1>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>

<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>

<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all;  border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>

<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>

<br>
.c5{ width:300px;word-break:break-all;  border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>

<br>
.c6{ width:300px;word-break:keep-all;  border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c6>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>

<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto;  border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c7>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</div>


 

今天做网站时,文章显示出了点问题:在表格显示文章时,中文可以自动换行,而英文不行,把TD撑变形了,所以在网上找资料研究了下.

首先对于一般的问题,我收集的资料如下:

发现对于英文字符,如果字母数字连在一起那么在表格中是不会自动分行的,除非用style="WORD-WRAP: break-word;"
WORD-WRAP的属性 微软说明如下
 String that specifies or receives one of the following values.
normal ,Default. Content exceeds the boundaries of its container.
break-word ,Content wraps to next line, and a word-break occurs when necessary.

如果是中文,只要定了表格的宽度,一般是会自动换行的.
如果以上换行方法还是不可以,用style="word-break:break-all;"
如下这个方式
<td style="word-break:break-all;">
english english english english english english english english english english english english english english english english english english english english english english english english english english
</td>
word-break的属性 微软说明如下
String that specifies or receives one of the following values.
normal ,Default. Allows line breaking within words.
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.
有三个值可以选择normal,break-all,keep-all上文已经很清楚的说明.
在帮助文件中有提到
When using the word-break attribute with a TABLE, you must set the table-layout property to fixed on the TABLE.
但是我觉得不用 也没有关系

比如
把<table>
替换为
<table cellpadding=0 cellspacing=0 width=100% style="TABLE-LAYOUT: fixed">
把
<td>
替换为
<td style="LEFT: 0px; WIDTH: 100%; WORD-WRAP: break-word; 130; 0pt">
任何在 <td>中的字母都会自动换行

但是table中的换不换好像差别不是很大

但是 现在有个问题,有时候需要自动换行,但是不希望把一个英文单词分成2行,那么怎么办呢,其实默认的时候中文英文都会自动换行的,对于英文不能换行的问题是 因为英文连在一起了,比如空格用&nbsp;形成这个的字符串 english&nbsp;&nbsp;&nbsp;english&nbsp;english&nbsp;english 此时就不能执行自动换行的功能了,如果此时的&nbsp;换成空格" "就可以自动换行
现在问题就好办了,只要替换"&nbsp;"为" "就可以,但是现在有个问题浏览器一般来说会把多个" "看成一个 " "所以我们只需要换个&nbsp;就可以了,否则的话原来的排版可能会出现问题,因此我用正则表达式替换 在字母前面的一个空白" "来实现此功能
实现方法如下
str.replace(/&nbsp;(?=\w)/ig," ");
就这么简单,现在测试英文会自动换行,而且不会被强行截断了
总结
在宽度固定的情况下,默认时中英文都可以自动换行的
而有时英文不能自动换行的原因是因为有&nbsp;变成空白的原因
浏览器不把&nbsp;看出单词的分界符号,所以不换行,用替换一个&nbsp;为空白的方法可以实现原来的功能

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

分享到：
| 设计类电子杂志收集
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    如何解决英文单词排版断行？.docx

    在处理文档排版时，尤其是中英文混合的文本，英文单词排版的断行问题常会让排版者感到困扰。英文单词的优雅断行不仅关乎文档的外观美观，而且也是遵守书写规范的体现。本文将详细探讨如何解决这一挑战，并提供具体的...

    浅析机器人自动涂胶系统断胶问题.pdf

    "机器人自动涂胶系统断胶问题分析" 根据提供的文件信息，我们可以总结出以下知识点： 一、机器人自动涂胶系统的组成 机器人自动涂胶系统主要由涂胶机器人系统、供胶系统、前/后风窗玻璃对中装置、侧窗玻璃对中...

    PB应用技巧——数据窗口自动折行

    数据窗口自动折行功能则可以解决这个问题，它允许数据根据窗口宽度自动换行，从而避免了水平滚动条的出现，使数据更易于阅读和理解。 ### 实现步骤详解 实现数据窗口自动折行，主要通过以下步骤： #### 1. 创建或...

    自动关断继电器驱动电路.rar

    这个“自动关断继电器驱动电路.rar”文件包含了关于如何构建这样一个电路的相关资料。 在设计自动关断继电器驱动电路时，我们首先要考虑以下几个关键组成部分： 1. **继电器**：这是核心组件，通常包含一个电磁...

    英文自动换行怎样解决

    下面是一个具体的示例代码片段，演示了如何使用上述CSS属性来实现英文自动换行： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;English Text Wrap Example div { width: 110px; background: #000; color: #fff; ...

    mysql 连接闪断自动重连的实例

    总之，处理MySQL连接闪断并实现自动重连是一个关键的错误恢复策略，它确保了应用程序在面对网络问题时仍能保持服务连续性。通过合理的设计和编程实践，我们可以构建出健壮的数据库连接管理机制。

    unity 自动excel转json插件

    Unity是一款广泛应用于游戏开发的3D引擎，它支持多种编程语言，如C#，并提供了...总之，“unity 自动excel转json插件”是Unity开发过程中一个实用的辅助工具，帮助开发者简化数据管理，专注于游戏的创意和功能实现。

    解决2008_R2服务器每隔一段时间就自动关机的问题

    因此，解决自动关机问题是服务器管理员的重要任务之一。本文将详细介绍解决 2008 R2 服务器每隔一段时间就自动关机的问题。 什么是 WLMS 进程？ 在解决自动关机问题之前，我们需要了解 WLMS 进程的作用。WLMS...

    latex《自动化学报》中英文模版

    在IT行业中，LaTeX是一种广泛使用的排版系统，尤其在学术界和科研领域，它以其强大的公式排版、复杂...总的来说，这份模板是自动化领域研究人员进行学术交流的一个有力工具，它简化了论文写作的流程，提高了工作效率。

    FastReport中文折行问题修正

    在FastReport报表设计中，中文折行问题是一个常见的困扰，特别是在使用frmemo控件时。FastReport是一款功能强大的报表设计工具，广泛应用于Windows应用程序中，用于生成各类报表。然而，由于编码、字体以及控件设置...

    delphi7按回车自动跳行不需编程

    ”进一步强调了这是一个关于环境配置而非编写程序逻辑的问题。在Delphi中，这种自动跳行功能可能隐藏在编辑器的首选项或设置中，允许开发者优化他们的编码体验，提高效率。 关于“dosmove”这个文件名，它可能是一...

    weblogic连接池配置数据库断掉重连的问题

    在 Weblogic 中，连接池配置数据库断掉重连是一个非常重要的问题。连接池配置是 Weblogic 中的一种机制，用于管理与数据库的连接。然而，在实际应用中，我们经常会遇到连接池配置数据库断掉的问题，这将导致应用程序...

    关于VNC连接时自动断联的问题

    VNC

    自动化专业英语教程全文翻译PDF+WORD.rar

    《自动化专业英语教程全文翻译》为学习者提供了一个学习和交流的平台，帮助他们更好地融入全球自动化专业领域，获取最新的知识和技术。无论是在学术研究、工业实践还是职业生涯规划中，掌握英语双语技能都至关重要。...

    自动化专业英语 自动化专业英语

    自动化专业英语是面向自动化领域的专业人士或学生的一门特殊语言课程，旨在提升他们在阅读、写作、听力和口语方面处理英文技术资料的能力。这门学科涵盖了自动化技术中的关键术语、概念和设备，例如控制系统、传感器...

    自动化/控制类专业英语演讲ppt+演讲稿

    该压缩包为自动化/控制类专业英语演讲ppt+演讲稿，适用于自动化/控制等专业英语演讲需求，内容为GAN生成对抗网络。关于详细信息可参考我的博客。

    Excel与DBC互转脚本：基于MATLAB的自动化转换工具，轻松实现协议转换与真值表自动填充,Excel与DBC互转脚本（基于MATLAB） Excel与DBC互转脚本，有了这个脚本，可以自动把ex

    Excel与DBC互转脚本，有了这个脚本，可以自动把excel的通信协议转为标准dbc文件，减少工作量，不会造成因手工制作DBC文件会出现问题而难以检查的风险。 转脚本基于MATLAB编写（暂不支持脱离MATLAB运行，有时间可以搞...

    自动换行的textview 自定义view 识别英文

    `highQuality`和`balanced`在处理英文单词断行时会更智能，避免在单词中间截断。 ```xml ... android:ellipsize="end" &lt;!-- 在末尾添加省略号 --&gt; android:breakStrategy="highQuality" /&gt; &lt;!-- 提高英文断行...

    文本显示控件，支持长英文字符串自动换行

    在IT界，文本显示控件是用户界面设计中不可或缺的一部分，它们用于展示各种形式的文本信息，...在处理长英文字符串时，自动换行功能的实现是一个重要的考量点，而Qt库中的`TextEdit`控件为此提供了一个有效的解决方案。

    电气自动化专业英语词汇大全

    "电气自动化专业英语词汇大全"提供了一个全面的学习资源，旨在帮助学习者理解和应用英文版的电气自动化相关材料。以下是一些核心的电气自动化专业英语词汇及相关的知识点： 1. **Automation** - 自动化：指通过电子...

Magicbox
Global site tag (gtag.js) - Google Analytics