扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
都是个人的书写习惯罢了，你想一排也行，想一列也可以，无非就是空格和回车；反正都会出来代码提示的
创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目成都网站设计、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元北碚做网站,已为上家服务,为北碚各地企业和个人服务,联系电话:18980820575
1.你定死表格的宽度，即给表格一个宽度值（是数值，不是百分比）
2.强制不换行
div{
//white-space：不换行;normal 默认;nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
white-space:nowrap; }
自动换行
div{
word-wrap: break-word;
//word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}
3.总结了一下，只要在CSS中定义了如下句子，可保网页不会再被撑开了。
table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;)
注释一下：
1.第一条table{table-layout: fixed;}，此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all}，一般用这句这OK了，但在有些特殊情况下还是会撑开，因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
(1)语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
(2)语法：
word-wrap : normal | break-word
参数：
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生
说明：
设置或检索当当前行超过指定容器的边界时是否断开转行。
对应的脚本特性为word-wrap。请参阅我编写的其他书目。
(3)语法：
table-layout : auto | fixed
参数：
auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关
说明：
如何让表格自动换行？
设置或检索表格的布局算法。
对应的脚本特性为tableLayout。
4.按照网上大多数文章的说法，只要在CSS中加入：
代码
..........
Code:
table {br /
table-layout:fixed;word-break:break-all;word-wrap:break-word;}br /
div{word-break:break-all;word-wrap:break-word;}
就可以解决表格和层被撑破，最初我也是这样做的。不过这样的代码会造成一个问题，你会发现英文词全部被截断了，这不符合英语的书写习惯也不利于阅读。
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下：
代码
Code:
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
这也是现在我用的代码。
如上图，右击你要查看的地方，点击元素查看，然后下面相对应的代码..
右下角有相对应的CSS样式..你可以滚动轴拉下来看看..看看有继承哪些CSS样式在里面..
或者你打开CSS，查找CLASS的样式代码..一般情况下，没压缩过..样式一般都写在一起..
希望我能帮到你..
!-- /* !-- --是防止一些老版本的浏览器不支持CSS样式而添加的,如果不添加CSS代码就会显示在浏览器上。*/
td { /* 表格中的标准单元格*/
font-size: 9pt; /* 字体大小*/
color: #000000; /*字体颜色*/
}
a:hover { /* 当有鼠标悬停在链接上 */
font-size: 9pt; /* 字体大小*/
color: #FF6600;/*字体颜色*/
}
a {/* 超链接a*/
font-size: 9pt; /* 字体大小*/
text-decoration: none;/* 文本的修饰:为空*/
color: #676767;/* 字体颜色*/
noline:expression(this.onfocus=this.blur);/* 此段代码的作用是清除 a 链接在点击时会产生虚线的问题.*/
}
img{/* 图片设置*/
border:0;/* 图片边框的粗细：无/不可见*/
}
.img1{/* 图片设置1*/
border:1;/* 图片边框的粗细：1象素*/
}
.blue {/* 自定义class类blue*/
font-size: 9pt;/* 字体大小*/
color: #034683;/*字体颜色*/
}
.bgcolor {/* 背景颜色*/
font-size: 9pt; /* 字体大小*/
color: #1980DB;/*字体颜色*/
}
.btn_grey {/* 自定义class类btn_grey */
font-family: "宋体";/* 字体*/
font-size: 9pt;/* 字体大小*/
color: #333333; /*字体颜色*/
background-color: #eeeeee;/* 背景颜色为：#eeeeee*/
cursor: hand;/* 光标变成手型*/
padding:1px;/*指的是内边距：上和下，左和右都是1px*/
height:19px;/* 高度为：19px*/
border-top: 1px solid #FFFFFF;/*上边框实线：1象素 颜色为：#FFFFFF*/
border-right:1px solid #666666;/*右边框实线：1象素 颜色为： #666666*/
border-bottom: 1px solid #666666;/*底部边框实线：1象素 颜色为： #666666*/
border-left: 1px solid #FFFFFF;/*左部边框实线：1象素 颜色为： #FFFFFF*/
}
.txt_grey {/* 自定义class类txt_grey */
font-family: "宋体";/* 字体*/
font-size: 9pt;/* 字体大小*/
color: #333333;/*字体颜色*/
border: 1px solid #999999;/*边框实线：1象素 颜色为：#999999*/
}
.word_grey{/* 自定义class类word_grey */
color:#CFEAFD;/*字体颜色*/
}
.word_deepgrey{/* 自定义class类word_deepgrey */
color:#999999;/*字体颜色*/
}
.word_orange{/* 自定义class类word_orange */
color:#FF6600;/*字体颜色*/
}
.word_blue{/* 自定义class类word_blue*/
color:#123F73;/*字体颜色*/
}
.word_white{/* 自定义class类word_white */
color:#FFFFFF;/*字体颜色*/
}
.word_gray{/* 自定义class类word_gray */
color:#dddddd;/*字体颜色*/
}
body {/* body设置*/
margin-left: 0px;/*左边距：0px*/
margin-top: 0px;/*上边距：0px*/
margin-right: 0px;/*右边距：0px*/
margin-bottom: 0px;/*底边距：0px*/
background-image:url(../images/bg.gif)/*背景图片连接地址url(../images/bg.gif)*/
}
.textarea {/* 自定义class类textarea*/
font-family: "宋体";/*字体*/
font-size: 9pt;/*字体大小*/
color: #333333;/*字体颜色*/
border: 1px solid #999999;/*边框实线：1象素 颜色为：#999999*/
}
.shadow{/* 自定义class类shadow*/
font-size=13pt;/*字体大小*/
filter:DropShadow(Color=#111111,offX=1,offY=0,positive=1);/*添加对象的阴影效果*/
height:10;/*高度为:10*/
color:#FF9900;/*字体颜色*/
}
.shadow_1{/* 自定义class类shadow_1*/
font-size=11pt;/*字体大小*/
filter:DropShadow(Color=#111111,offX=1,offY=2,positive=1);/*添加对象的阴影效果*/
height:10;/*高度为:10*/
color:#FFC000;/*字体颜色*/
}
.shadow_2{
font-size=9pt;/*字体大小*/
filter:DropShadow(Color=#DDDDDD,offX=1,offY=1,positive=1);/*添加对象的阴影效果*/
height:10;/*高度为:10*/
color:#FF8700;/*字体颜色*/
}
.shadow_3{
font-size=13px;/*字体大小*/
filter:DropShadow(Color=#aaaaaa,offX=1,offY=1,positive=1);/*添加对象的阴影效果*/
height:10;/*高度为:10*/
color:#FF9900;/*字体颜色*/
}
.tableBorder {/*class类tableBorder*/
border: #aaaaaa 1px solid/*边框实线：1象素 颜色为：#aaaaaa*/
}
.hidden_a_line{/*class类hidden_a_line*/
noline:expression(this.onfocus=this.blur);/* 此段代码的作用是清除hidden_a_line 链接在点击时会产生虚线的问题.*/
}
--
楼上的都忘了清除浮动了
不清除浮动的话，DIV就不会计算高度，不计算高度的话，
要再往下写东西，就会错位的……
应该这样：
div style="float:left;"一/div
div style="float:left;"二/div
div style="float:left;"三/div
div style="clear:both;"清除浮动/div /*这个很重要*/
css分行内，内嵌和外联。
行内就是直接通过标签的style属性，在标签本行添加css样式。
内嵌是通过在head标签中创建style标签，通过标签选择器获取body内的标签，进行css样式的书写。
外联是是通过link标签引入其他css文件，css文件中样式的写法与内嵌式一致。好处是让你的html代码不至于那么臃肿，另外分开管理也是良好的习惯。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网