换行的css属性
2015-10-21 10:21
399 查看
//正常换行
word-break:keep-all;word-wrap:normal;
//下面这行是自动换行
word-break:break-all;word-wrap:break-word;
word-wrap:normal | break-word; (内容换行)
normal:默认的属性值.(允许内容顶开指定的容器边界).
break-word:内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能。)
word-break:normal | break-all | keep-all (词内换行)
normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
break-all : 强行换行,将截断英文单词
keep-all : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
text-overflow:clip | ellipsis (文本溢出)
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时(超过width部分)显示省略标记(...)
white-space: normal | pre | nowrap (内容不换行)
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
(层中放一个表格,如果层的float:none 则表格和层间会有空隙,这种问题的解决办法是在层的style里面加上white-space: nowrap)
使用方式: word-break:break-all;
一般情况下:
.body{
word-wrap:break-word;
word-break:keep-all;
overflow:hidden;
}
.css{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
IE与Firefox将它看成是一个长单词了,因此不会自动换行。
对于IE,可以通过IE专有的CSS属性word-wrap即可实现自动换行:word-wrap:break-word;
对于Firefox,CSS2标准并没有定义类似word-wrap的属性,可以通过overflow属性将撑出的部分隐藏:overflow:hidden
word-break:keep-all;word-wrap:normal;
//下面这行是自动换行
word-break:break-all;word-wrap:break-word;
word-wrap:normal | break-word; (内容换行)
normal:默认的属性值.(允许内容顶开指定的容器边界).
break-word:内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能。)
word-break:normal | break-all | keep-all (词内换行)
normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
break-all : 强行换行,将截断英文单词
keep-all : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
text-overflow:clip | ellipsis (文本溢出)
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时(超过width部分)显示省略标记(...)
white-space: normal | pre | nowrap (内容不换行)
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
(层中放一个表格,如果层的float:none 则表格和层间会有空隙,这种问题的解决办法是在层的style里面加上white-space: nowrap)
使用方式: word-break:break-all;
一般情况下:
.body{
word-wrap:break-word;
word-break:keep-all;
overflow:hidden;
}
.css{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
IE与Firefox将它看成是一个长单词了,因此不会自动换行。
对于IE,可以通过IE专有的CSS属性word-wrap即可实现自动换行:word-wrap:break-word;
对于Firefox,CSS2标准并没有定义类似word-wrap的属性,可以通过overflow属性将撑出的部分隐藏:overflow:hidden
相关文章推荐
- CSS框架——Less
- 20款素质过硬的响应式CSS栅格系统
- 【译】CSS实现响应式全屏背景图
- css----零散知识点
- css hack大全
- CSS3 基本语法
- css杂类收集
- listview中如何将某一个item显示成其它的样式
- css中将鼠标放到一个div上显示出另一个隐藏的div
- How Do I Target IE7 or IE8 Using CSS Hacks?
- css中padding 和 margin的格式
- CSS z-index 属性的使用方法和层级树的概念
- CSS实现不定高度垂直居中 兼容IE7
- IE6 IE7 IE8 IE9 IE10 Css hack及IE条件注释法
- Atom编辑器折腾记_(17)atom-minify[CSS/JS压缩神器]
- Atom编辑器折腾记_(17)atom-minify[CSS/JS压缩神器]
- css3 tranform transition animation
- CSS 的overflow:hidden 属性详细解释
- 如何访问到静态的文件,如jpg,js,css?
- css 图片/元素旋转代码