CSS之自动换行_CSS/HTML

大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 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将多出的内容隐藏,以免影响整体效果) 

时间: 2024-09-20 13:54:34

CSS之自动换行_CSS/HTML的相关文章

学习网页技术CSS实现自动换行功能

css|网页 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-spa

网页制作时用CSS实现自动换行的小技巧

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;} eg. <div id="wrap">ddd111

技巧总结:关于CSS实现自动换行的小技巧

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

CSS之自动换行

css  自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-spac

CSS 强制自动换行实例

CSS设置强制换行: word-break:break-all 强制断开实现转行 normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all : 该行为与亚洲语言的normal相同.也允许非亚洲语言文本行的任意字内断开.该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同.对于中文,韩文,日文,不允许字断开.适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法 设置或检索对象内文本的字内换行行为.尤其在出现多种语言时.对于中

怎么让css不自动换行代码

浮动层加margin后换行的例子: 比如说有个DIV宽度为380px,它里面有一个菜单列表,每个宽度为60px,margin-right为20px.如果就按照下面的HTML结构来做的话,那么这个菜单列表能在这个DIV里一行显示完整吗? <div>      <div>mb5u1</div>      <div>mb5u2</div>      <div>mb5u3</div>      <div>mb5u4&l

CSS基础学习_CSS/HTML

一.样式表基础 1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类(class).标识符(id).伪类(pseudo class,它们标示了超链接的不同状态)等. 2. 将样式表(规则)添加到HTML文档中有3种方式: ① 外部样式表. ② 应用于整个文档的样式,位于<head>区,包括嵌入样式表和输入样式表. ③ 行内样式,通过绝大多数元素的style属性实现. 3. 样式表内的注释用/* -*/.通过将样式规则包围在HTML注释&

CSS布局入门_CSS/HTML

CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px; PADDING-LEFT: 20px;  PADDING-TOP: 20px; PADDING-RIGHT: 10px;  P

div+css布局入门_CSS/HTML

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我