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的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
Firefox3.6中测试可以使用word-wrap:break-word强制换行,但word-break:break-all;仍无效
#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的换行方法

时间: 2024-09-17 04:50:36

CSS强制英文单词换行的方法的相关文章

css强制换行 css强制不换行的css方法_经验交流

以前总结过Div的换行和不换行的css写法.但对于表格单元格只知道一个属性nowrap可以使其不换行. 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? baidu了一下,令俺非常欣慰,还真的找到了办法,问题解决了. 用CSS实现表格单元格数据自动换行或不换行 1.自动换行: 自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行

css强制英文换行(1/2)

 代码如下 复制代码 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行www.111cn.net div{ word-break:break-all; } 1.(ie浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准. #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;w

css 强制不换行实例

CSS设置不换行: overflow:hidden 溢出隐藏 white-space:nowrap 不换行 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象   强制不换行  代码如下 复制代码 div{ white-space:nowrap; } 实例  代码如下 复制代码 <style type="text/css"> .NoNewline { word-break: keep-all;/*必须*/ } &l

css强制隐藏浏览器滚动条方法

强制显示滚动条:  代码如下 复制代码 html { overflow: scroll; } 强制隐藏滚动条:  代码如下 复制代码 html { overflow: hidden; } 隐藏IE的水平滚动条:  代码如下 复制代码 html { overflow-x: hidden; } 隐藏IE的垂直滚动条:  代码如下 复制代码 html { overflow-y: hidden; } 强制显示IE的水平滚动条:  代码如下 复制代码 html { overflow-x: scroll;

css实现强制不换行和自动换行和强制换行的方法

强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{ word-break:break-all; } ============================================ CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强

CSS强制换行对齐的实现方法

 本文实例讲述了CSS强制换行对齐的实现方法.分享给大家供大家参考.具体分析如下: 用CSS控制中英文字符强制换行并两端对齐,有效避免DIV的内容超出范围而改变网页布局,强制换行的功能很实用.   代码如下: <html> <head> <title>CSS强制换行对齐</title> </head> <body> 英文对齐: <div style="font-size:12px;width:300;text-alig

css实现强制不换行/自动换行/强制换行

强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap:break-word; word-break:normal; } 强制英文单词断行 div{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 设置强行换行: word-brea

css强制文字不换行实例详解

强制不换行 CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 例  代码如下 复制代码 div{ white-space:nowrap; } 注意 .p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/ .p5{white-space:nowrap; overflow:hidden;

CSS强制TD不换行

1.给<table>加上style="table-layout:fixed": 2.给<td>加上style="width:100px;text-overflow:ellipsis; word-break:keep-all; overflow:hidden;" js生成TABLE cell的时候,cell里文字过多的时候似乎以上方法也不太好用.可以直接这样: cell.innerHTML="<nobar>"+&