- 浏览: 39242 次
- 性别:
- 来自: 北京
最新评论
在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。
我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下移一行。在第二行显示。而不是把ul撑宽,或者是把自己撑高(内容换行,高度增加)
分别定义了ul的宽度210px和li的宽度自动,发现结果是:
ul并没有被撑宽,可惜li也没有自动到下一样排列。而是内容换行,把li给撑高了。然后死皮赖脸的挤在了第一行。。
仔细考虑过之后认为问题出在li内部内容换行上。于是寻找禁止换行的css属性。
网上查了下没找到。问了群里永目日月,得到word-break这个属性。 keep-all;不换行。。
加到li里后惊奇的发现问题解决了。
给工作组做页面调试时候却被人指出显示有问题。
走过去一看,显示的确没有改变。才想到可能是浏览器版本问题。
我用的是IE7和FF 他们用的IE6。到DW里检查了一下 发现word-break这个属性确实不被IE6支持:
CSS 属性 word-break 不受支持Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0
这个nowrap不是word-braek的吗?难道它能让不换行?
抱着试试的心理我把它完整敲上
white-space: nowrap;
DW测试没有出现下划虚线,意思是浏览器支持方面没有问题。
保存F12。问题解决了。呵呵。。。
顺便写下语法:
语法:
white-space : normal | pre | nowrap
取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明:
设置或检索对象内空格字符的处理方式。
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体 来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;隐藏文字显示为点
例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。
我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下移一行。在第二行显示。而不是把ul撑宽,或者是把自己撑高(内容换行,高度增加)
分别定义了ul的宽度210px和li的宽度自动,发现结果是:
ul并没有被撑宽,可惜li也没有自动到下一样排列。而是内容换行,把li给撑高了。然后死皮赖脸的挤在了第一行。。
仔细考虑过之后认为问题出在li内部内容换行上。于是寻找禁止换行的css属性。
网上查了下没找到。问了群里永目日月,得到word-break这个属性。 keep-all;不换行。。
加到li里后惊奇的发现问题解决了。
给工作组做页面调试时候却被人指出显示有问题。
走过去一看,显示的确没有改变。才想到可能是浏览器版本问题。
我用的是IE7和FF 他们用的IE6。到DW里检查了一下 发现word-break这个属性确实不被IE6支持:
CSS 属性 word-break 不受支持Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0
这个nowrap不是word-braek的吗?难道它能让不换行?
抱着试试的心理我把它完整敲上
white-space: nowrap;
DW测试没有出现下划虚线,意思是浏览器支持方面没有问题。
保存F12。问题解决了。呵呵。。。
顺便写下语法:
语法:
white-space : normal | pre | nowrap
取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明:
设置或检索对象内空格字符的处理方式。
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体 来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;隐藏文字显示为点
发表评论
-
jquery 下拉菜单
2015-05-08 14:53 597http://sc.chinaz.com/jiaoben/ca ... -
JSP 页面缓存以及清除缓存
2015-01-16 16:15 682JSP 页面缓存以及清除 ... -
ie 浏览器
2013-10-23 16:53 553<!--[if IE]>….<![end ... -
判断浏览器
2013-04-17 11:15 587下面整理的是一套判断方法: function getExplo ... -
JS刷新父窗口的几种方式
2013-01-29 10:40 712JS刷新父窗口的几种方式 浮层内嵌iframe及frame集合 ... -
Javascript 异步加载详解
2012-11-16 10:23 579Javascript 异步加载详解 本文总结一下浏览器在 ja ... -
js map
2012-08-10 08:52 828<mce:script type="text/ ... -
js 全角半角
2012-08-10 08:53 853一、用JS把全角转换成半角(不能转换标点符号) <in ... -
毫秒值转换日期格式
2012-05-11 09:03 1121var oldTime = (new Date("2 ... -
鼠标滚轴事件
2011-12-19 11:33 784鼠标滚轴事件 2009/12/30 11:13 <!DO ... -
键盘按键编码
2011-12-05 11:01 2394<html> <head> </ ... -
火狐 插件安装路径
2011-11-03 17:33 945C:\Documents and Settings\用户名\A ... -
ajax传递中文参数乱码.txt
2011-11-03 17:30 2571最近在开发中碰到ajax传递中文参数乱码的问题,弄了很久才搞定 ... -
如何让鼠标指针变成一个小手状
2011-09-18 10:46 3508JavaScript中onmouseover时如何让鼠标指针变 ... -
正则表达式
2011-09-13 13:37 668整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2} ... -
jquery 城市选择
2011-05-20 11:22 1651jquery 城市选择 -
jquery 解析 xml
2011-05-02 15:43 821<html xmlns="http://www ... -
按下回车事件
2011-01-18 10:27 931//按下回车事件 <body onKeyDown = ... -
jquery 选择器用法大全
2011-01-18 10:11 758附件中。jquery 选择器用法大全.rar -
js 判断浏览器
2011-01-17 13:20 864在网站前端开发中,浏览器兼容性问题本已让我们手忙 ...
相关推荐
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
在CSS网页布局中,常常会遇到这样的问题,强制...而有些时候可能会强制内容不换行,多出的部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性WEBJX.com作一些整理,希望能给大家的工作和学习提供参考。 先了解
本文介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法,分享给大家,具体如下: 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词...
今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...
而浏览器默认是强制不换行输出 pre 里的内容。这样的话,代码一长就出现了撑到页面外部的样子。在之前我都是有意的在代码里强制换行... 累啊. 今天有意的google了下,找到了: [code]pre { whitewhite-space: pre-...
text-overflow 概要:其作用是解决文本溢出时,其展现的形式 该属性有两个参数,分别如下: CSS Code复制内容到剪贴板 ... white-space:nowrap:给文本容器设置强制不换行,让元素文本在一行内显示。 overflow:hid
糟糕的是如果不使用CSS和HTML在特定的位置强制换行,或者严格限制文本中允许的标记,或者夸张地使用脚本的话,这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。 列计数器和宽度 ...
span标签 当内容超出 强制不断行 自动换行 复制代码代码如下: white-space:nowrap;white-space:norma;display:inline-block; 超出自动隐藏 英方不断行显示 (必须在块元素内) 复制代码代码如下: overflow:hidden;...
开发过程中,表格单元格里的显示数据经常超出单元格的宽度。遇到这种情况一般会这样处理。 1、超出部分显示省略号(…) ... (3) nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br
参数:0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word 说明:若网站应用需要保留更多的Word样式效果,请设置此值为1,不过产生的HTML代码体积会大大增大 备注:1.1.4版本中新...
10、CSS强制换行样式 251 11、CSS强制同行超出部分隐藏样式 253 12、CSS设置行间距样式 253 13、CSS水平下拉菜单被FLASH覆盖如何解决 253 14、禁止选择页面上的文字来拷贝 254 15、JS屏蔽右键菜单 255 16、禁止保存...
3.5 双击不选中文本 3.6 通过单击事件添加或解除绑定 3.7 激活整个div层的单击事件 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法 3.11 设定时间延迟的方法 3.12 延时显示子菜单的方法 ...
-修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...
1.修正:粘贴强制转文本模式下,换行丢失问题的修正(感谢luofei614提供修正方案) 2.修正:修复IE9第二屏无法选择问题 3.修正:修正不支持jQuery 1.9问题,需要引用jquery-migrate 4.修正:修正width:'700'参数...
-修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...
Comments [java] 文本注释 ['kɒments] compile [java] v.编译 [kәm'pail]' Compilation n.编辑[,kɒmpi'leiʃәn] const (保留字) constant n. 常量, 常数, 恒量 ['kɒnstәnt] continue (关键字) coupling ...
1.增加试题导入题干和选项换行符“[换行]” 2.增加试题导入题干结束符“|题干结束|”(独立一行),支持多行题干导入 3.增加试题库翻页功能 4.增加切换栏目自动回到页面顶部功能 V3.6.1(20110714) 1.增加安装部分...