css之自动换行
http://www.javaeye.com/post/254050
![]() |
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是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> 效果:隐藏多于内容 下面是提到的例子的效果 |
http://www.quirksmode.org/css/overflow.html
The overflow declaration
show page contents
Explorer Windows, with the exception of Explorer 7 in Strict Mode, implements
overflow: visible
incorrectly. See below.
The
overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a
height
: if it doesn't, it becomes as high as necessary to contain its contents, and the
overflow
declaration is useless.
You can assign four values to overflow and they should give the following results:
visible
. the content flows out of the box.hidden
. the overflowing content is completely hidden, not accessible to the user.auto
. show scrollbars where necessary (horizontal or vertical or both).scroll
. always show horizontal and vertical scrollbars, regardless of whether they're necessary. This value is never used; you generally wantauto
.
Test
Safari cannot dynamically change
overflow
to
auto
or
scroll
.
Test
overflow
by changing its value for the test element.
This is the test element. It has the following styles:
width: 30em;One more line of text
height: 5em;
padding: 1em;
border: 1px solid #cc0000;
overflow: visible
and Explorer Windows
Explorer Windows (with the exception of Explorer 7 in Strict Mode) implements
overflow: visible
incorrectly.
The correct behaviour is that the element with
Screenshot: Correct implementation of overflow: visible
overflow: visible
becomes as high and wide as the CSS orders, and that any content that doesn't fit spills out of the box, overlapping, if necessary, the content that follows.
![Correct implementation of overflow: visible](https://i-blog.csdnimg.cn/blog_migrate/d04c21e0355c82d18698054cfa01d180.gif)
Instead, Explorer Windows (with the mentioned exception) stretches up any element with
Screenshot: Incorrect implementation of overflow: visible
overflow: visible
until the content fits in it. Effectively
width
serves as
min-width
.
![Incorrect implementation of overflow: visible](https://i-blog.csdnimg.cn/blog_migrate/9ba4fa653a93b706c2744e7a4b323e10.gif)
http://www.javaeye.com/post/254050
一、CSS控制
word-wrap:break-word;
table-layout:fixed;
overflow:hidden;
text-overflow:ellipsis;
二、table里
在标签中加入“”,
在需要强制单词换行的
标签中加入“”
三、firefox下
经鉴定:IE下好使,ff不好使!迄今为止,ff下好像还没有好的解决办法!
可以用js插入 来解决
js 代码
|
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1615556