CSS之自动换行

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！
对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

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

<div id="wrap">ddd1111111111111111111111111111111111</div>

效果：可以实现换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

<div id="wrap">ddd1111111111111111111111111111111111111111</div>

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed；

<style>
.tb{table-layout:fixed}
</style>

<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap

<style>
.tb {table-layout:fixed}
</style>

<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>
.tb{table-layout:fixed}
</style>

<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：两个td均正常换行

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>

<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>

这里单元格宽度一定要用百分比定义

效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）

赞 (0)

相关推荐

  • CSS之自动换行

    大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准. #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} <div id="wrap">ddd1111111111111111

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

  • CSS控制文本自动换行的问题

    用表格做网页排版的时候,一般都能正常使用.偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:( 总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了. table{table-layout: fixed;} td(word-break: break-all; word-wrap:break-word;) 注释一下: 1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行. 2.td{word-

  • 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 对象 设置强行换行: wor

  • firefox css自动换行的实现方法

    IE直接用:word-break:break-all;  /*允许词内换行*/    word-wrap:break-word; /*内容将在边界内换行*/    /*需要注意的默认是:*/    word-wrap:normal /*允许内容顶开指定的窗口边界*/           而firefox却没有很好的实现办法 ,一个折中方案就是使用滚动条,但网上也提出了一种用js来判断换行的办法,这里摘录下(转自网络,特此说明). JavaScript复制代码 <script type="t

  • 从零学CSS系列之文本属性

    从零学CSS系列之文本属性

    1.line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, 复制代码 代码如下: body {  font-size: 12px;  line-height: 1.5;} h1 {  font-size: 36px;} 这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5). 就算使用

  • 百度编辑器ueditor前台代码高亮无法自动换行解决方法

    百度编辑器ueditor前台代码高亮无法自动换行解决方法

    问题描述: 在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的. 解决办法: 找到高亮代码显示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css 具体的路径根据你的ueditor做改动 找到 复制代码 代码如下: .syntaxhighlighter{width:100%!im

  • 微信小程序 css使用技巧总结

    微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上.左.右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } 2:设置最高高度..超过后可以滑动 max-height: 550rpx; overflow-y: scroll; 3:

  • js实现连续英文字符自动换行兼容ie6 ie7和firefox

    复制代码 代码如下: irefox中连续英文字符如果要CSS控制强制换行,探索了N久,发现是实现不了的逼不得已的时候就用js脚本进行控制吧 英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • div+CSS 兼容小摘

    区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

随机推荐