设置div中文字超出时自动换行
一、对于div强制换行
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;
同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
二、对于table强制换行
1. (IE浏览器)使用样式table-layout:fixed;
2.(IE浏览器)使用样式table-layout:fixed与nowrap
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div。
-----------------------------------------------------------------------------------------------------------------------------------
三、强制不换行:div{white-space:nowrap;}
四、自动换行:div{ word-wrap: break-word; word-break: normal;}
五、强制英文单词断行:div{word-break:break-all;}
设置div中文字超出时自动换行的更多相关文章
- CSS 之 div中文字超出时自动换行
在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...
- HTML DIV中文字自动换行 , 顶部对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- 设置div中的div居中显示
设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...
- JavaScript设置div中的文字滚动起来 实现滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css中设置table中的td内容自动换行
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...
- div中文字水平和垂直居中的css代码
HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...
- div中内容超出自动换行
下面以table中td的内容超出为例说明: 首先: td { display: block; } 然后:给td设置css样式: 1. td { word-wrap: break-word; } 2. ...
- 通过代码设置button中文字的对齐方式
// button.titleLabel.textAlignment = NSTextAlignmentLeft; 这句无效 button.contentHorizontalAlignment = U ...
- 在点击div中的p时,如何阻止事件冒泡?
今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: < ...
随机推荐
- pageControl设置不居中显示,居左或居右
UIPageControl控件,默认是居中显示的,如下图: 在很多的APP中,会看到pageControl是居左或居右显示的,如下图: 如何控制pageControl的位置显示呢? 设置为居右的代 ...
- 关于@synchronized(self)的用法
@synchronized 的作用是创建一个互斥锁,保证此时没有其它线程对self对象进行修改.这个是objective-c的一个锁定令牌,防止self对象在同一时间内被其它线程访问,起到线程的保护作 ...
- websocket nodejs实例
http://blog.sina.com.cn/s/blog_49cc837a0101aljs.html http://blog.sina.com.cn/s/blog_49cc837a0101a2q3 ...
- QT变异版本下载(SJLJ长跳转,DWARF不传递错误(32位专用),SEH(64位专用)),以及QT的实验室项目
http://www.tver-soft.org/ http://sourceforge.net/projects/qt64ng/ ---------------------------------- ...
- 监听APP升级广播处理
当旧版本的用户升级新版本的时候需要重新设定一些值处理,这时候需要监听升级版本的广播 <receiver android:name=".OnUpgradeReceiver"&g ...
- struts1 工作原理
struts1的原理和工作流程 struts1的工作原理或者说工作流程: 1.在web应用程序启动就会加载ActionServlet,ActionServlet从配置文件struts-config.x ...
- [LeetCode#241]Different Ways to Add Parentheses
Problem: Given a string of numbers and operators, return all possible results from computing all the ...
- Trailing return types
Trailing return types是C++11关于函数声明的语言特性之一,旨在解决模版编程遇到的语法相关的问题,先看一个简单例子,感受一下什么是trailing return types: C ...
- js键盘控制DIV移动
<style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...
- (转载)php获取mysql版本的几种方法小结
(转载)http://www.jb51.net/article/13930.htm 查询当前连接的MYSQL数据库的版本,可以用下面SQL语句来实现 select VERSION(); 当前$res= ...