HTML+CSS中控制长字符串的自动换行问题

原文地址:

在HTML+CSS中,长字符串的自动换行问题,总是造成意想不到的麻烦。下面是一些相关的总结。

 

针对于div、p等块级元素:

1.对于正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。


1 #wrap{white-space:normal; width:200px; }
2  
3 <div id="wrap">对于正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。div>

2.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word;或者word-break:break-all;实现强制断行


1 #wrap{word-break:break-all; width:200px;} 或者#wrap{word-wrap:break-word; width:200px;}
2  
3 <div id="wrap">wwwiteaocomwwwiteaocomwwwiteaocomiteaodiv>

3.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条


1 #wrap{word-break:break-all; width:200px;overflow:auto;}
2  
3 <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111div>

 

对于表格table:

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏


1 <table style="table-layout:fixed" width="200">
2  <tr>
3   <td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssstd>
4  tr>
5 table>

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break :break-all;或者word-wrap : break-word ;换行


1 <table width="200"style="table-layout:fixed;">
2 <tr>
3 <td width="25%"style="word-break :break-all; ">wwwiteaocomwwwiteaocomwwwiteaocomiteaotd>
4 <td style="word-wrap :break-word ;">wwwiteaocomwwwiteaocomwwwiteaocomiteaotd>
5 tr>
6 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;无法起作用

1     <tablestyle="table-layout:fixed" width="200">
2 <tr>
3 <td width="25%"style="word-break :break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890td>
4 <td width="75%"style="word-wrap :break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890td>
5 tr>
6 table>
 
5.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框,最后,这种现象出现的几率很小,但是不能排除网友的恶搞。

01     
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type"content="text/html;charset=gb2312" />
05 <title>字符换行title>
06 <style type="text/css">
07 table,td,th,div {border:1px green solid;}
08 code {font-family:"Courier New", Courier, monospace;}
09 style>
10 head>
11 <body>
12 <h1>
13 <code>divcode>
14 h1>
15 <h1>
16 <code>Allwhite-space:normal;code>
17 h1>
18 <div style="white-space:normal;width:200px;">Wordwrap still occurs in a td elementthat has its WIDTH attribute set to a value smaller than theunwrapped content of the cell, even if the noWrap property is setto true. Therefore, the WIDTH attribute takes precedence over thenoWrap property in thisscenariodiv>
19  
20 <h1>
21 <code>IE word-wrap : break-word ;code>
22 h1>
23 <div style="word-wrap :break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111div>
24 <h1>
25 <code>IE word-break:break-all;code>
26 h1>
27 <div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111div>
28 <h1>
29 <code>Firefox/ word-break:break-all;overflow:auto;code>
30 h1>
31 <div style="word-break:break-all;width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111div>
32 <h1>
33 <code>tablecode>
34 h1>
35 <h1>
36 <code>table-layout:fixed;code>
37 h1>
38 <table style="table-layout:fixed" width="200">
39 <tr>
40 <td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssstd>
41 tr>
42 table>
43 <h1>
44 <code>table-layout:fixed; word-break :break-all; word-wrap : break-word;code>
45 h1>
46 <table width="200"style="table-layout:fixed;">
47 <tr>
48 <td width="25%"style="word-break :break-all; ">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssstd>
49 <td style="word-wrap :break-word ;">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssstd>
50 tr>
51 table>
52 <h1>
53 <code>FF table-layout:fixed;overflow:hidden;code>
54 h1>
55 <table style="table-layout:fixed" width="200">
56 <tr>
57 <td width="25%"style="word-break :break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890td>
58 <td width="75%"style="word-wrap :break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890td>
59 tr>
60 table>
61 body>
62 html>

你可能感兴趣的:(.net,CSS,html,JAVASCRIPT)