网页中有这样的需求,外层宽度固定了,内层每个li宽度不定,依靠float:left;padding-right:6px;产生间距,没有指定宽度,就导致宽度不可预测,也就是表现为最后一个如果不够显示,字会掉下一行,此情况在ie下表现严重,firefox正常显示.怎么解决呢.
white-space:nowrap;
这样既可.
/*友情链接*/
.link p{ padding:10px;}
.link li{float:left;padding-right:6px;white-space:nowrap;}
.link p a{color:#757575}
.link p span{ color:#CCC}
<div class="wp clear link"><li>友情链接:</li><li><a href="http://www.xiaojudeng.com/" target="_blank" title="小桔灯分类信息网,免费信息发布平台">小桔灯分类信息网</a></li><li><a href="http://www.398.cn/" target="_blank" title="398网址导航,上网从这里开始.">398网址导航</a></li><li><a href="http://www.51.am/" target="_blank" title="51爱美网,整形美容行业门户网站">51爱美网</a></li><li><a href="http://www.baidu.com/" target="_blank" title="百度一下,你就知道">百度</a></li><li><a href="http://www.google.com/" target="_blank" title="google">google</a></li><li><a href="http://www.xiaojudeng.com/link/">更多>></a></li></div>
这样以后就可以自动换行而不会出现掉下去的尴尬了.
下面是white-space属性的说明,大家可以参考一下.
版本:CSS1 兼容性:IE5.5+ NS4+ 继承性:有
语法:
white-space : normal | pre | nowrap
取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象 www.xiaojudeng.com
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明:
设置或检索对象内空格字符的处理方式。
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体 来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
本文由
小桔灯分类信息网 (http://www.xiaojudeng.com)原创,转载请注明出处,谢谢.
分享到:
相关推荐
复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行: overflow...
3. **单元格内部强制换行(IE/Firefox)** - 对于需要在单元格内部换行的情况,可以结合使用`white-space: nowrap;`和`word-wrap: break-word;`或`word-break: normal;`。 - 示例代码: ```css td { white-...
`white-space: nowrap` 是`white-space`属性的一个值,它的含义是强制所有文本都在同一行显示,即使内容超出了元素的边界也不会自动换行。这个属性常用于创建横向滚动条或者在有限的空间内显示长串内容,如标签云、...
今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...
CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似,但它们在处理文本换行的细节上有所不同,下面将详细...
### CSS中的强制换行与强制不换行 在网页布局设计中,文本的换行处理是非常重要的一个方面。良好的文本换行不仅可以使页面看起来更加整洁美观,还能够提高用户的阅读体验。CSS(层叠样式表)提供了多种方式来控制...
在 IE 的 TD 中,如果我们没有指定宽度,使用 `white-space: nowrap;` 可以实现强制不换行。但是,如果我们为 TD 指定了宽度,并且文字中无标点、无空格,上述代码不再有效。这时,可以加 `word-break: keep-all;` ...
white-space: nowrap; /* 取消自动换行,可按需求调整 */ } 按钮1 按钮2,内容较长 按钮3 <!-- 添加更多按钮 --> ``` 以上代码创建了一个使用Flexbox布局的按钮容器,按钮会根据内容自动调整高度,...
### 兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行 在Web开发过程中,为了确保页面在不同浏览器中的一致性和兼容性,掌握正确的CSS技巧至关重要。本文主要探讨如何实现跨浏览器的强制不换行与强制换行功能...
然而,当处理中文标签时,设计师经常会遇到一个问题,那就是长的中文词组在有限的空间内可能会被强制换行,影响了标签云的整体视觉效果。为了解决这个问题,我们可以利用CSS中的`white-space: nowrap`属性。 `white...
`white-space` CSS 属性正是为此而生,它允许我们精确地定义文本如何处理空白、换行和其他空白字符。在标题提及的场景中,`white-space` 被用来阻止文字自动换行,以确保所有文字都在同一行内显示,即使内容超过了...
2. **强制换行** 使用`white-space`属性可以控制元素内的空白处理。`white-space: break-all;`可以使单词在任意位置换行,而不仅仅是空格或标点符号处。 3. **断词** `word-break`属性用来控制单词的断词规则。`...
### CSS 实现文本不换行、自动换行与强制换行的方法 在Web开发中,对文本进行合理的换行处理是非常重要的,它不仅能够改善页面布局的美观度,还能够提高用户体验。本文将详细介绍如何使用CSS来实现文本的不换行、...
`white-space: pre-wrap` 是这个属性的一个值,它允许保留空白符和换行,同时支持自动换行,使得内容可以在不溢出容器的情况下适应不同的屏幕尺寸。 在HTML中,默认情况下,多个连续的空白字符(空格、制表符、换行...
只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码: ...
CSS 属性 - white-space 空白属性使用说明 白白空属性是 CSS 中一个重要的属性,它用于控制 HTML 元素中的空白处理。通过设置 white-space 属性,我们可以控制文本在元素中的换行、空格和制表符等空白符的处理方式...
本文介绍了css是如何实现在页面文字不换行、自动换行、强制换行的方法,分享给大家,具体如下: 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词...
white-space: nowrap; word-wrap: break-word; word-break: break-all; overflow: auto; } This is a very long sentence that needs to be wrapped automatically, especially when it contains a ...
/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/ } ...