大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是
创新互联专注于沛县企业网站建设,自适应网站建设,商城网站定制开发。沛县网站建设公司,为沛县等地区提供建站服务。全流程按需网站制作,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
CSS如何将他们换行的方法!
对于div
1.(IE浏览器)white-space:normal;
word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal;
width:200px;
}
或者
#wrap{word-break:break-all;width:200px;}
ddd1111111111111111111111111111111111
效果:可以实现换行
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;
}
ddd1111111111111111111111111111111111111111
效果:容器正常,内容隐藏
对于table
1.
(IE浏览器)使用样式table-layout:fixed;
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
效果:可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
.tb
{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
效果:可以换行
3.
(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz
1234567890
abcdefghigklmnopqrstuvwxyz
1234567890
效果:两个td均正常换行
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
.tb
{table-layout:fixed}
.td
{overflow:hidden;}
abcdefghigklmnopqrstuvwxyz
1234567890
abcdefghigklmnopqrstuvwxyz
1234567890
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)
主要用到CSS的word-break属性,为其添加:break-all参数,这样的话字符会适应规定的宽度而自动换行,实际上这就是CSS的强制换行功能。
1.可以通过XHTML标准的换行br /
2.或者用tdpinput....../pplabelABCDEF/label/p/td
加上段落标记不仅能达到换行效果,还能使2行间有一定间距
1、首先打开hbuilder软件,新建一个html文件,里面设置一个3行一列的table表格。
2、然后在style标签中设置table的样式,给table一个宽度和高度,并且把字体调大,设置背景色;再设置td的样式,给它们添加word-wrap和word-break两个属性就可以了,此css属性表示 在长单词或 URL 地址内部进行换行。
3、然后打开浏览器,就可以看到文字已经自动换行了。
css换行属性:语法:word-wrap
:
normal
|
break-word
取值:normal
:
默认值。允许内容顶开指定的容器边界
break-word
:
内容将在边界内换行。如果需要,词内换行(
word-break
)也将发生
说明:设置或检索当当前行超过指定容器的边界时是否断开转行。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的
height
或
width
属性,或者设定
position
属性为
absolute
,或者设定
display
属性为
block
。此属性对于
currentStyle
对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为
wordWrap
。
示例:div
head
runat="server"
title无标题页/titlestyle
type="text/css"!--div
--/style/head然后
属性调用CssClass="div"
一、使用writing-mode属性
语法:writing-mode:lr-tb或writing-mode:tb-rl
参数:
1、lr-tb:从左向右,从上往下
2、tb-rl:从上往下,从右向左
运行代码发现,ie显示正常,火狐却不行,所以不建议使用writing-mode属性,下面使用模拟方法实现。
二、模拟文字竖排
代码:
ul{width:100px;height:80px;overflow:hidden;list-style:none;}
ul li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}
此方法让li右浮动,设置li宽度和字宽度一样都是14px,这样就自动换行了。另外,“word-wrap:break-word;word-break:nomal;”这句实现标点自动换行(连续字符自动换行)。