自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,

　　挺让人头疼,下面介绍的是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>

　　效果：隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

最后，这种现象出现的几率很小，但是不能排除网友的恶搞。

下面是提到的例子的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>字符换行</title>

<style type="text/css">

table,td,th,div { border:1px green solid;}

code { font-family:"Courier New", Courier, monospace;}

</style>

</head>

<body>

<h1><code>div</code></h1>

<h1><code>All white-space:normal;</code></h1>

<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>

<h1><code>IE \ word-wrap : break-word ;</code></h1>

<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>IE \ word-break:break-all;</code></h1>

<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>

<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>table</code></h1>

<h1><code>table-layout:fixed;</code></h1>

<table style="table-layout:fixed" width="200">

<tr>

<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>

</tr>

</table>

<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>

<table width="200" style="table-layout:fixed;">

<tr>

<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>

<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>

</tr>

</table>

<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1>

<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>

</body>

</html>

　　

css之自动换行的更多相关文章

  1. 解决table不能换行的问题与CSS之自动换行总结

    table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:style="table-layout:fi ...

  2. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  3. css之自动换行-设计师零张

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  4. css样式自动换行/强制换行

    写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...

  5. 【转】css样式自动换行（强制换行）

    原文链接:http://blog.csdn.net/ye987987... 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的 ...

  6. CSS 实现自动换行、强制换行、强制不换行的属性

    实现效果 1.自动换行: word-wrap:break-word; word-break:normal; 2.强制换行: word-break:break-all;       按字符截断换行 /* ...

  7. JS/CSS收藏

    jQuery radio取值,checkbox取值,select取值 var url += '&beginTime=' + encodeURIComponent(beginTime) if ( ...

  8. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  9. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

随机推荐

  1. Redhat和ubuntu的区别

    风大神给了我一个完全基于 Linux 的操作系统ubuntu(乌班图)(是一个以桌面应用为主的Linux操作系统),当然作为linux,服务器应用都不会弱.,说是这个好用,可飞凌上资料用的居然是red ...

  2. 《java JDK7 学习笔记》之键值对Map

    一.常用的Map操作类 1.使用HashMap Map也支持泛型语法,泛型的Map实例: 建立Map操作对象时,可以使用泛型语法指定键与值的类型.上图键使用String,值也使用String类型.要建 ...

  3. 简单的ROT13码编码与解码

    ROT13码意思是将字母左移13位.如'A' ↔ 'N', 'B' ↔ 'O','V' ↔ 'I'. 下面实现ROT13码的解码. function rot13(str) { var arr = [] ...

  4. PHP使用缓存生成静态页面

    http://www.cnblogs.com/lh460795/archive/2013/04/06/3003105.html 在apache / bin/ab.exe  可以做压力测试,该工具可以模 ...

  5. 基于CAShapeLayer以及UIBezierPath的语音输入效果动画封装

    详情地址 嗯,主要是在简书上写,大家可以关注我的简书,如果有什么更好的建议也可以评论,探讨,加以斧正.

  6. strcpy函数导致release版程序崩溃

    最近在写一个读取模型文件的小程序.很随意的使用了strcpy函数进行char字符数组的拷贝,这个数组是需要传递给PostMessage作为WPARAM的参数.代码部分如下: char pStrCurr ...

  7. 在Linux系统下安装大于mysql5.5版本的数据库

    linux下mysql 5.5的安装方法: 1.安装所需要系统库相关库文件      gcc等开发包,在安装linux系统的时候安装. 2.创建mysql安装目录 # mkdir -p /usr/lo ...

  8. ImageButton如何让图片按比例缩放不被拉伸

    了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例 ...

  9. Poj/OpenJudge 1042 Gone Fishing

    1.链接地址: http://bailian.openjudge.cn/practice/1042/ http://poj.org/problem?id=1042 2.题目: Gone Fishing ...

  10. resid入门笔记（二）

    本节介绍redis 消息订阅   密码  持久化  主从配置   首先我对消息订阅理解的不深,应该说仅知道概念吧 发送消息  cctv1 发送 hello   cctv2 发送 ‘你好’ client ...