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

　　挺让人头疼,下面介绍的是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. 在 Ubuntu 16.04 中安装谷歌 Chrome 浏览器

    进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 也可以按下 Win 键(或叫 Super 键),在 Dash 的搜索框中输入 terminal 或&q ...

  2. Xilinx 网站资源导

    Xilinx 网站资源导读 ———版权声明———–本文作者 Ricky Suwww.fpganotes.comrickysu.fpga@gmail.com 欢迎转载,转载请保持原样及署名商业使用须得到 ...

  3. alert

    先别着急测试,来猜测一下下面一行代码执行的结果 alert(alert(1234567)); 此刻,我自己还不是不太理解 我的分析是这样: alert() 是window下面的一个方法 alert(1 ...

  4. 2014年下半年计划—写博客，旅游，带女朋友拍写真

           前言:写这篇博客之前,一直在网上,看各位大牛写的博文,发布的视频等.当然由于自己的初来乍到,人生地不"熟"儿的,也吃了不少亏,走了不少弯路.本着一颗学习的心,携着向各 ...

  5. 通过GitHub部署网站到Azure WebSite

    一.将代码上传到GitHub存储库中 第一步:创建Github新账户 第二步:新建仓库 第三步:安装Github shell程序,地址:http://windows.github.com/ 第四步:打 ...

  6. C++多态性与C#的比较

        多态性:统一操作作用于不同的对象可以有不同的解释,产生不同的执行结果.多态性可以分为两种:一是编译时的多态性,一是运行时的多态性.     编译时的多态性包括重载.覆盖.运算符重载.对于非虚的 ...

  7. SecureCRT 7.3.4 安装以及破解

    1-9为 SecureCRT 7.3.4 安装图解:10-13是 SecureCRT 7.3.4 破解图解,心急的朋友可以直接向下拉. 以下是百度百科对 SecureCRT 的介绍: SecureCR ...

  8. SQLite 入门教程（一）基本控制台（终端）命令

    一.基本简介 SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所以也可以作为嵌入式数据库内建在你的应用程序中.SQLite 被应 ...

  9. 用PHP操作http中Etag、lastModified和Expires标签

    http://blog.hehehehehe.cn/a/10994.htm 客户端通过浏览器发出第一次请求某一个URL时,根据 HTTP 协议的规定,浏览器会向服务器传送报头(Http Request ...

  10. extjs类的生命周期

    只要extjs对应的类文件加载了,那么该类就可以构造对象或者用来继承了.