设置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代码如下: < ...
随机推荐
- theano中对图像进行convolution 运算
(1) 定义计算过程中需要的symbolic expression """ 定义相关的symbolic experssion """ # c ...
- C++必备知识
新进C++程序员应在一年内完成学习“basic”类别知识点,两年内完成学习“advance”类别知识点,三到四年内完成学习“expert”1.基础(Basic)(1)变量与基本类型:(2)typede ...
- leetcode面试准备:Decode Ways
1 题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: ...
- Android - N级树形结构实现
目前已经实现3级之内的任意级树形结构展示(如果想增加更多级,需要扩展排序算法),并支持单选和多选(使用不同的适配器). 实现使用的控件:ListView 首先,最重要的应该是数据源的格式,支持树形结构 ...
- latch free
latch free 等待事件: latch: cache buffers chains 这个等待事件其实还有另外一个重要的原因,那么就是逻辑读太高,SQL执行计划走错了导致的. 当进程想要获取锁存器 ...
- 关于android布局的两个属性dither和tileMode
首先,两个单词的中文意思分别是dither(抖动)和tileMode(平铺) 1,先来介绍tileMode(平铺) 它的效果类似于 让背景小图不是拉伸而是多个重复(类似于将一张小图设置电脑桌面时的效果 ...
- 【转】Eclipse中设置ButterKnife进行注解式开发步骤 -- 不错
原文网址:http://www.bubuko.com/infodetail-974262.html 最近在进行Android注解式开发的学习,正在尝试用ButterKnife.ButterKnife的 ...
- 【转】VC++ MFC 常用技巧(一)
原文网址:http://www.lewensky.cn/read.php/106.htm (-). 下面是常见的Afx全局函数: AfxFormatString1:类似printf一般地将字符串格式化 ...
- 关于android屏幕适配
好吧 我承认被美工虐的够呛,而且美工他么是个男的!一点也不美, 废话不多说 急着赶路, 之前不怎么重视 直到遇见这个美工给我一套1080x1920的 图,没错 就一套 1dp=3px没错的啊 问题是就 ...
- MT9v024总结
S1: A typical READ or WRITE sequence begins by the master sending a start bit. After thestart bit, t ...