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

　　挺让人头疼,下面介绍的是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. Azure Powershell 创建 Internal Load Balancer

    Select-AzureSubscription -SubscriptionName "订阅名称" $serviceName="云服务名称" $ilbName= ...

  2. JavaScript学习总结二(Date对象的用法)

    javascript Date对象的常用API 1:创建日期 Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: ...

  3. 介绍map.entry接口

    Map是java中的接口,Map.Entry是Map的一个内部接口.java.util.Map.Entry接口主要就是在遍历map的时候用到. Map提供了一些常用方法,如keySet().entry ...

  4. orcale授权

    grant connect,resource,dba to 表名;--用户授权 CONNECT角色: --是授予最终用户的典型权利,最基本的 CREATE SESSION --建立会话 RESOURC ...

  5. Js替换地址栏参数

    开了博客竟然有9个月没在来写过了.真是惭愧.今天需要用到一个用js替换地址栏参数的的功能.就自己用JS自己写了一个简单的函数.贴出来仅供大家参考.代码都写了注释.如下: /* js替换URL参数值,无 ...

  6. 第27条：使用“class-continuation分类”隐藏实现细节

    Objective-C动态消息系统(参见第11条)的工作方式决定了其不可能实现真正的私有方法或私有实例变量. 匿名分类的特点: 与普通的分类不同,它必须定义在其所接续的那个类的实现文件里. 唯一能声明 ...

  7. 比之前那个版本更简单的C语言实现的比较大小

    之前那个是输入一堆数据,找最大那个,这次是更简单的版本,求两个数的最大值. #include "stdafx.h" #include <stdio.h> int Get ...

  8. NSDate与 NSString 、long long类型的相互转化

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3560280.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...

  9. Head First 设计模式系列之二----备忘录模式（java版）

    申明:这几天无意中关注到备忘录模式,比较陌生回家一番参考书,只在附录里记录了该模式.后来在园子里有发现了有专门写设计模式的博客,并且写的也得牛逼.附上链接 http://www.cnblogs.com ...

  10. hdu 5014 Number Sequence

    为了a异或b的和最大,只需另b在不大于n的情况下按位取反即可. 这里有两个输出小技巧可以参考: 1.在用printf输出__int64时,在windows下使用格式"%I64d", ...