`

CSS强制文本不换行

 
阅读更多
在一个规定宽度大小的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;隐藏文字显示为点
分享到:
评论

相关推荐

    CSS实现不换行/自动换行/文本超出隐藏显示省略号

    CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。

    CSS网页布局强制换行和强制不换行的属性讲解

    在CSS网页布局中,常常会遇到这样的问题,强制...而有些时候可能会强制内容不换行,多出的部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性WEBJX.com作一些整理,希望能给大家的工作和学习提供参考。 先了解

    css是如何实现在页面文字不换行、自动换行、强制换行的方法

    本文介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法,分享给大家,具体如下: 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词...

    css文本换行属性word-wrap和white-space使用总结

    今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...

    pre 自动换行的问题

    而浏览器默认是强制不换行输出 pre 里的内容。这样的话,代码一长就出现了撑到页面外部的样子。在之前我都是有意的在代码里强制换行... 累啊. 今天有意的google了下,找到了: [code]pre { whitewhite-space: pre-...

    CSS中一些常用的文本属性整理

    text-overflow 概要:其作用是解决文本溢出时,其展现的形式 该属性有两个参数,分别如下: CSS Code复制内容到剪贴板 ... white-space:nowrap:给文本容器设置强制不换行,让元素文本在一行内显示。 overflow:hid

    使用CSS3实现多列布局与多背景的技巧

    糟糕的是如果不使用CSS和HTML在特定的位置强制换行,或者严格限制文本中允许的标记,或者夸张地使用脚本的话,这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。 列计数器和宽度 ...

    Html长文本超出标记宽度后自动截取实现代码

    span标签 当内容超出 强制不断行 自动换行 复制代码代码如下: white-space:nowrap;white-space:norma;display:inline-block; 超出自动隐藏 英方不断行显示 (必须在块元素内) 复制代码代码如下: overflow:hidden;...

    单元格内文本显示超过单元格宽度的快速解决办法

    开发过程中,表格单元格里的显示数据经常超出单元格的宽度。遇到这种情况一般会这样处理。 1、超出部分显示省略号(…) ... (3) nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br

    xheditor-1.1.14

    参数:0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word 说明:若网站应用需要保留更多的Word样式效果,请设置此值为1,不过产生的HTML代码体积会大大增大 备注:1.1.4版本中新...

    IBM WebSphere Portal门户开发笔记01

    10、CSS强制换行样式 251 11、CSS强制同行超出部分隐藏样式 253 12、CSS设置行间距样式 253 13、CSS水平下拉菜单被FLASH覆盖如何解决 253 14、禁止选择页面上的文字来拷贝 254 15、JS屏蔽右键菜单 255 16、禁止保存...

    超实用的jQuery代码段

    3.5 双击不选中文本 3.6 通过单击事件添加或解除绑定 3.7 激活整个div层的单击事件 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法 3.11 设定时间延迟的方法 3.12 延时显示子菜单的方法 ...

    ExtAspNet_v2.3.2_dll

    -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...

    xhEditor编辑器 v1.2.2

    1.修正:粘贴强制转文本模式下,换行丢失问题的修正(感谢luofei614提供修正方案) 2.修正:修复IE9第二屏无法选择问题 3.修正:修正不支持jQuery 1.9问题,需要引用jquery-migrate 4.修正:修正width:'700'参数...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...

    整理后java开发全套达内学习笔记(含练习)

    Comments [java] 文本注释 ['kɒments] compile [java] v.编译 [kәm'pail]' Compilation n.编辑[,kɒmpi'leiʃәn] const (保留字) constant n. 常量, 常数, 恒量 ['kɒnstәnt] continue (关键字) coupling ...

    ASP ISchool随机抽题考试系统

    1.增加试题导入题干和选项换行符“[换行]” 2.增加试题导入题干结束符“|题干结束|”(独立一行),支持多行题干导入 3.增加试题库翻页功能 4.增加切换栏目自动回到页面顶部功能 V3.6.1(20110714) 1.增加安装部分...

Global site tag (gtag.js) - Google Analytics