自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换

行的方法

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以实现换行

2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,
我们只有让超出边界的字符隐藏或者,给容器添加滚动条

#wrap

{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：容器正常，内容隐藏

对于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的方法
运行代码框100素材网
最后，这种现象出现的几率很小，但是不能排除网友的恶搞。如果

有什么问题请到在下面留言

下面是提到的例子的效果

 

<!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;">abcdefghijklmnabcdefghijklmnabcdefghijkl

mn111111111</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. css控制文字长度，超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  2. --css 控制文字多使用省略号

    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...

  3. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

  4. 问题：css 自动换行；结果：CSS控制文本自动换行

    CSS控制文本自动换行 CSS控制文本自动换行,阅读CSS控制文本自动换行,1.你定死表格的宽度,即给表格一个宽度值(是 数值,不是百分比) 2.强制不换行div{//white-space:不换行; ...

  5. html/css实现文字自动换行，超出部分出现(...)

    PS:这是我在别人博客copy下来的 做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时 ...

  6. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

  7. CSS控制文字，超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  8. CSS控制文本自动换行

    1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或 ...

  9. 使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）

    前言 有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显 ...

随机推荐

  1. 【详记MySql问题大全集】三、安装之后没有my.ini配置文件怎么办

    系列目录 一.安装MySql 二.安装并破解Navicat 三.没有my.in配置文件怎么办 四.设置MySql的大小写敏感 五.重置MySql登陆密码 之前说过,Windows操作系统中,我们安装M ...

  2. lvs、nginx、HAProxy、keepalive工作原理

    1. lvs.nginx.HAProxy.keepalive工作原理 1.1. 前言 遇到了负载均衡和高可用选型问题,我觉的有必要好好理解下lvs,nginx,haproxy和keepalive的区别 ...

  3. npm ERR! Refusing to install package with name "webpack" under a package -----

    当我们在安装以一些依赖的时候会提示以下报错--------- 问题出在: 这个name 不能使用所需要安装包的名字! 解决方案----- 修改下就行 -- -我将wenpack 改成webpack1 ...

  4. Merge branch 'master' of xxx error

    Merge branch 'master' of xxx Please enter a commit message to explain why this merge is necessary,es ...

  5. Python快速学习01：Eclipse上配置PyDev & 'Hello World ！'

    前言 系列文章:[传送门] 答应了Vamei,帮他传文章,Python,顺自己学学. 很喜欢这种黏黏的语言 突然发现--我用的GoAgent(谷歌FQ软件),竟然是Python编的. 简介 Pytho ...

  6. MFC原理第四讲.动态创建机制

    MFC原理第四讲.动态创建机制 一丶要学习的知识点以及简介 动态创建是什么意思? 动态创建其实就是跟C++的new一样.都是创建对象.但是规避了C++语法的缺陷. 例如: char * ClassNa ...

  7. Go Web：RESTful web service示例

    RESTful架构的简介 web服务的架构模式主要有2种:SOAP和REST.SOAP和REST都回答了同一个问题:如何访问web服务. SOAP风格的程序是功能驱动的,要借助xml来传递数据,明确表 ...

  8. Yum搭建LNMP环境(动、静、库分离)(week4_day5)--技术流ken

    前言 本篇博客使用yum来搭建lnmp环境,将采用动态,静态以及数据库分开安装的方式即nginx,php,mysql.会被分开安装在不同的服务器之上,搭建出来一套lnmp环境,并部署wordpress ...

  9. ElasticSearch安装及HEAD插件配置

    1. 安装 ElasticSearch 直接下载 zip 包解压即可,假设解压到 E:\ESTool\elasticsearch-5.6.3 2. 安装 nodejs 和 npm head 插件本身是 ...

  10. [转]php中 curl模拟post发送json并接收json

    本文转自:https://blog.csdn.net/pangchengyong0724/article/details/52103962 本地模拟请求服务器数据,请求数据格式为json,服务器返回数 ...