博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css之自动换行
阅读量:5875 次
发布时间:2019-06-19

本文共 2772 字,大约阅读时间需要 9 分钟。

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

  挺让人头疼,下面介绍的是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的宽度,多余内容隐藏

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

  效果:隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-
break : break-all;或者word-wrap : break-word ;换行

abcdefghigklmnopqrstuvwxyz 1234567890 abcdefghigklmnopqrstuvwxyz 1234567890

  效果:可以换行

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;无法起作用

abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

  效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
下面是提到的例子的效果

字符换行

div

All white-space:normal;

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

IE \ word-wrap : break-word ;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

IE \ word-break:break-all;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Firefox/ word-break:break-all; overflow:auto;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

table

table-layout:fixed;

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

table-layout:fixed; word-break : break-all; word-wrap : break-word ;

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

FF \ table-layout:fixed; overflow:hidden;

abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890

  

转载于:https://www.cnblogs.com/xupeiyu/p/3625946.html

你可能感兴趣的文章
js提交图片转换为base64
查看>>
学习CodeIgniter框架之旅(二)继承自定义类
查看>>
Y2161 Hibernate第三次考试 2016年8月18日 试卷分析
查看>>
Angular CLI 使用教程指南参考
查看>>
PHP 程序员的技术成长规划
查看>>
用于守护进程的出错处理函数
查看>>
AppCan可以视为Rexsee的存活版
查看>>
【转】SQL SERVER 2005 数据库状态为“可疑”的解决方法
查看>>
事件、委托、委托方法的总结(使用EventHandler<>)
查看>>
Revit API 创建带箭头的标注
查看>>
jetty启动报错Unsupported major.minor version 51.0
查看>>
Xamarin.Android开发实践(七)
查看>>
彩色图像上执行Mean Shift迭代搜索目标 ,维加权直方图 + 巴氏系数 + Mean Shift迭代...
查看>>
深入理解JavaScript系列
查看>>
strtol 函数用法
查看>>
eclipse内存溢出设置
查看>>
搭建jenkins环境(linux操作系统)
查看>>
VS 2015 GIT操作使用说明
查看>>
上海办理房产税变更
查看>>
每天一个linux命令(52):scp命令
查看>>