`

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

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

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

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

相关推荐

    IText html转pdf 解决中文自动换行问题

    1、解决HTML转pdf 中文、数字、英文不能换行的问题，修改的源码包 重新计算了右边距。 2、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502

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

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

    英文自动换行怎样解决

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

    pb数据窗口自动折行函数(打印时对编号、款号等英文数字没有空格时效果好，源码).zip

    在描述的场景中，"pb数据窗口自动折行函数"是一个针对数据窗口对象的定制化功能，主要目的是解决在打印时编号、款号等含有英文或数字连续字符串的折行问题，特别是在这些字段没有空格分隔时。 通常，当数据窗口内的...

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

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

    kettle行转列详解

    在数据处理过程中，有时我们需要将数据从行格式转换为列格式，或者反之，这被称为“行转列”或“列转行”。在Kettle中实现这一功能，可以通过“Row to Column”或“Column to Row”步骤来完成。 在本文中，我们将...

    电源自动关断电路设计

    总的来说，电源自动关断电路设计是一个实用且经济的解决方案，它结合了稳压和延时控制技术，确保了电路的安全运行，并有效地节约了电能。通过理解和应用这些基本原理，我们可以设计出更高效、更安全的电源管理系统，...

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

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

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

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

    安卓app自动更新，一行代码搞定，最新开源库

    在Android应用开发中，自动更新功能对于保持应用的最新状态和修复潜在问题至关重要。"安卓app自动更新，一行代码搞定，最新开源库"这个标题所指的，就是一种简化了自动更新流程的方法，它利用特定的开源库，使得...

    英语自动翻译(vb.net源代码)

    标题中的“英语自动翻译(vb.net源代码)”指的是一个基于VB.NET编程语言开发的应用程序，其主要功能是实现英语文本的自动翻译。这个程序利用了两个知名的在线翻译平台——Bing（微软必应）和Google翻译引擎，来提高...

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

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

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

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

    多个view自动换行

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

    FastReport中文折行问题修正

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

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

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

    自动化测试 英文文献

    本文基于一篇2008年的英文文献《Software Test Automation》（作者：Oliver Tuschling），探讨了自动化测试的基本原理、优势以及在复杂多环境系统中的应用。 #### 二、自动化测试概述 自动化测试是指通过使用特定的...

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

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

    220V转380V电源自动切换原理图分析.pdf

    在这过程中，继电器的动作实际上是对电源线路进行切换，从一个电压等级切换到另一个电压等级，使得焊机可以在不同的供电环境下稳定工作。 文档中提到了整流桥，整流桥是一个将交流电（AC）转换为直流电（DC）的装置...

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

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

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