`

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

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>
可以看出一般情况下,两个输出完全一致,而有表格的情况下,第二个输出会自动换行

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

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

相关推荐

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

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

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

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

    成绩录入自动转到下一行

    同名科目指科目后面加上一个字母区分的科目，如“语文A”、“语文B”。 二、输入 没有小数可以在表格中输入，有小数时只能在表格下面输入。 自动跳格：只有输入的分值不到满分的十分之一的数（如满分是100,10分及...

    英文强制换行css 使用css强制英文单词断行代码

    在做企业站的英文版的时候，英文单词由于剩下的空间不足，导致整个单词都...强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行： overflow:hidden 隐藏 white-space：normal 默认 pre 换行

    Javascriptalfredworkflows自动驼峰式变量有道API中文转英文

    标题中的“Javascriptalfredworkflows自动驼峰式变量有道API中文转英文”涉及了多个技术领域，主要包括JavaScript编程、Alfred Workflows工具、驼峰式命名规则以及有道API的使用，特别是用于中文到英文的翻译。...

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

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

    英文自动换行怎样解决

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

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中，实现...通过以上步骤，我们可以实现一个功能完备的表格动态添加删除行的JS特效，同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用，比如数据录入、配置管理等场景。

    自动断浇口支架注射模设计.zip机械设计毕业设计

    《自动断浇口支架注射模设计》是一份深入探讨机械设计领域的毕业设计论文，主要聚焦于塑料制品生产中的注塑工艺。注塑模具是塑料成型加工中的关键工具，而自动断浇口支架注射模则是其中一种高效且智能化的模具类型。...

    C++转C#的自动工具

    标题中的"C++转C#的自动工具"是一个用于将C++源代码自动转换为C#源代码的程序。这样的工具通常被开发人员用来方便地在两种不同的编程语言之间迁移项目，尤其是在一个团队需要从C++迁移到C#，或者希望利用C#特有的...

    Html转pdf 解决中文、数字、英文换行问题

    解决HTML转pdf 中文、数字、英文不能换行的问题，修改的源码包 重新计算了右边距

    unity 自动excel转json插件

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

    多个view自动换行

    在Android开发中，"多个view自动换行"通常是指在一个布局容器中，当视图（View）数量过多，无法在一行内显示时，系统能够自动将它们换行展示，以适应不同的屏幕尺寸和布局需求。这涉及到对ViewGroup的管理和布局管理...

    电子政务-带熔断器的双电源自动转换开关.zip

    这种系统通常由两路独立的电源输入、一个转换开关和控制逻辑组成。当主电源出现故障，如电压波动、停电等，转换开关会在毫秒级别内检测到问题，并切换至备用电源，以保障电子政务系统的连续运行。 而熔断器则是双...

    FastReport中文折行问题修正

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

    解决DrawText中文字与字母之间自动换行

    在探讨“解决DrawText中文字与字母之间自动换行”的问题时，我们首先需要理解DrawText函数的基本概念及其在Windows编程中的应用。DrawText是一个Windows API函数，用于将文本绘制到指定的矩形区域，同时提供了多种...

    笼型异步电动机转子断条故障诊断方法综述

    笼型异步电动机转子断条故障诊断方法的知识点涵盖了故障诊断原理、分类方法和未来发展趋势几个方面。笼型异步电动机是工业生产中常见的电动机类型，其性能的稳定直接关系到生产效率和安全。转子断条故障是笼型异步...

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

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

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

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

    电子政务-一种蒸汽地拖断电自动断水阀门.zip

    在这个特定的案例中，结合描述和压缩包内的文件名，我们可以推测这是一个关于电子政务在蒸汽地拖设备安全管理方面的应用。 描述中的“一种蒸汽地拖断电自动断水阀门”指的是一个自动化系统，当蒸汽地拖设备电力供应...

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