zoukankan
html css js c++ java
[收藏]CSS网页制作时实现自动换行的小技巧
作者Blog:
http://blog.csdn.net/AppleBBS/
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!
对于div
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; 200px; }
或者
#wrap{word-break:break-all;200px;}
<
div
id
="wrap"
>
ddd1111111111111111111111111111111111
</
div
>
效果:可以实现换行
2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; 200px; overflow:auto;}
或者
#wrap{word-break:break-all;200px; overflow:auto; }
<
div
id
="wrap"
>
ddd1111111111111111111111111111111111111111
</
div
>
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed;
<
style
>
.tb
{
}
{
table-layout
:
fixed
}
</
style
>
<
table
class
="tbl"
width
="80"
>
<
tr
>
<
td
>
abcdefghigklmnopqrstuvwxyz 1234567890
</
td
>
</
tr
>
</
table
>
效果:可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
<
style
>
.tb
{
}
{
table-layout
:
fixed
}
</
style
>
<
table
class
="tb"
width
="80"
>
<
tr
>
<
td
nowrap
>
abcdefghigklmnopqrstuvwxyz 1234567890
</
td
>
</
tr
>
</
table
>
效果:可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<
style
>
.tb
{
}
{
table-layout
:
fixed
}
</
style
>
<
table
class
="tb"
width
=80
>
<
tr
>
<
td
width
=25%
nowrap
>
abcdefghigklmnopqrstuvwxyz 1234567890
</
td
>
<
td
nowrap
>
abcdefghigklmnopqrstuvwxyz 1234567890
</
td
>
</
tr
>
</
table
>
效果:两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
<
style
>
.tb
{
}
{
table-layout
:
fixed
}
.td
{
}
{
overflow
:
hidden
;
}
</
style
>
<
table
class
=tb
width
=80
>
<
tr
>
<
td
width
=25%
class
=td
nowrap
>
<
div
>
abcdefghigklmnopqrstuvwxyz 1234567890
</
div
>
</
td
>
<
td
class
=td
nowrap
>
<
div
>
abcdefghigklmnopqrstuvwxyz 1234567890
</
div
>
</
td
>
</
tr
>
</
table
>
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)
查看全文
相关阅读:
React Native 实现MQTT 推送调研 (1)
bpmn的依赖注入
vdom diff
浏览器渲染与event loop
uni-app 通过后缀名区分不同渠道版本
网页定宽 栅格布局
网页顶部菜单导航和左侧菜单导航的区别?
Android利用tcpdump和wireshark抓取网络数据包
就算做了
我眼中的Serverless
原文地址:https://www.cnblogs.com/calmzeal/p/403939.html
最新文章
不过如此系列之SpringBoot入门
一片文章让你懂Java Annotation
分布式系统初探-ssm整合zookeeper & dubbo
分布式系统初探-zookeeper&dubbo环境搭建
java8之lambda表达式看这一篇就够了
java集合框架之ArrayList
oracle使用expdp/impdp命令导入导出数据
oracle对用户、 表、字段的基本操作
idea 常用快捷键整理
centos7下安装jdk
热门文章
离线安装多版本node,使用nvm管理
angular-ui-bootstrap typeahead 智能提示 自动补全 获取焦点不触发问题的解决
No Spring WebApplicationInitializer types detected on classpath 问题的一种解决办法
Chrome+postman+postman interceptor调试
jsp EL表达式原样输出问题
idea maven cannot resolve symbol http报错问题解决
RESTful
Linux jdk 环境变量配置
Spring源码工程导入Eclsipse缺少两个jar文件
gradle环境变量设置_配置注意事项
Copyright © 2011-2022 走看看