一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

最新推荐文章于 2022-09-03 09:20:46 发布
原创 最新推荐文章于 2022-09-03 09:20:46 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie

博客介绍了使用一句white-space:nowrap代码，可解决IE6和IE7浏览器下浮动元素不自动换行的问题，聚焦于前端开发中浏览器兼容性的处理。

一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行


【CSS笔记】CSS布局相关属性（显示元素、文本溢出、元素浮动）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
08-18 581
当子级元素使用浮动属性之后，它的父级元素如果没有设置高度，那么由于浮动元素脱离文档流，不占据文档流的高度，所以从而导致父级元素的高度不能被撑开。CSS可以通过【display】属性来设置HTML元素是否显示，以及显示的方式，是以行内元素显示，还是以块内元素显示，还是以行内块元素显示。也可以设置为none隐藏元素，display设置隐藏元素之后，元素不会占据原先的空间，后面的元素会填充隐藏元素的空间位置。，也就是这个元素不占据原先的空间，后面的元素会填充浮动元素原先的空间。要如何解决父级元素的高度问题呢？..
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 1万+
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
ie6/7/360安全模式下，浮动的li不能自动换行的问题
pink_clouds的博客
08-17 644
ie6/7/360安全模式下，浮动的li不能自动换行的问题
浮动换行的解决办法
cathei的博客
06-06 4491
浮动换行阻挡：往往出现在瀑布流布局中，若上一行浮动块高度不一致，就会导致在当前行浮动过程中被阻挡。margin也是浮动块停止的边缘。一般情况下，往往是因为盒子的内容高度不一致，问题最多的是图片。当每个图片的宽高比不一致时，设置相同高度。高度会有差异。 解决办法：移动端：给图片一个固定高，设置object-fit:cover; PC端：图片差异不大时，给所有图片设置相同...
CSS强制不换行(white-space:nowrap)IE使用问题
JeamKing的专栏
05-12 9203
什么情况下会出现换行：当元素设置了固定高度，并且文本长度大于标签元素的宽度时，文本会自动换行。css强制换行使用样式：white-space:nowrap;该样式从效果上是没有浏览器差异，使用该样式后所有文字在ie和firefox下都在一行内显示。但是在IE下使用该属性值后标签元素宽度会被撑大，从而可能导致原来页面布局被破坏。解决办法：white-space:nowrap;
49个常用的CSS代码片段
m0_67846661的博客
05-26 492
1、文字超出部分显示省略号 单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行文本溢出显示省略号 p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden
css3自学笔记（3）
qq_46335785的博客
05-25 327
1：定位 1.1：为什么需要定位 1：有一些效果标准流和浮动都无法实现，此时需要定位来实现 2：浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列的盒子。 3：定位则是可以让盒子自由的在某个盒子内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。 1.2定位的组成 定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位=定位模式+边偏移 ...
css学习
weixin_68658847的博客
09-03 820
基础css学习
HTML、CSS基础知识笔记
木木木森林
11-26 1101
构造函数在es6之前是没有“类”的概念的。 格式化VS CODE 文档：shift + alt +f css hover 如果给a元素，那么只有在a里面的才能被选取，如果给外面的元素像div，ul li 这样就是在元素外部也能被选取。 行内元素不支持直接设置宽、高。 不换行，溢出的字以省略号表示： width：多少px自己决定; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 注：ellipsis : 　当对象内文本溢出
IE6,IE7下实现white-space:pre-wrap
09-25
我们知道，在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被视为一个，或者说，连续的多个空白符会被合并。
在IE6 下span标签换行问题解决--》 'white-space:nowrap' 仅作用在纯文本内容上
WEBCODE
08-15 571
标准参考 根据 W3C CSS 2.1 规范中的描述 'white-space:nowrap' 设置的含义为：该值像 'normal' 那样合并空白，但是阻止文本内的分行。 详细说明请参考：16.6 White space: the 'white-space' property 替换元素是用来表示超出 CSS 格式化模型表示范围的元素，他们的共同特点是没有设置宽高的情况下拥有默认宽高。常...
IE8和IE9下 white-space无效
沉迷学习 日渐消瘦
09-29 2238
给文本设置超出省略号显示在IE8和IE9下无效 解决方法，在元素上添加word-wrap: normal .text-ellipsis { .... word-wrap: normal; .... }
ie7下使用white-space:nowrap时padding-right失效问题记录
Web前端开发
03-15 1380
chrome下效果： ie7下效果：
IE7下浮动元素的内容自动换行的BUG解决方法
weixin_30729609的博客
03-08 173
有时候我们想写个浮动得到这样的效果： 代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;...
IE下,文字不自动换行
WDYDXF的专栏
04-03 4017
white-space: nowrap;
如何在 IE6,7 下实现 white-space: pre-wrap;
weixin_34364071的博客
08-07 312
2019独角兽企业重金招聘Python工程师标准>>> ...
white-space使用注意事项
weixin_30469895的博客
07-17 247
今天写移动端的时候有个地方需要横向滚动的功能，自然而然需要用到white-space这个属性了，但是试了一下发现没有效果，反复查找原因后，发现white-space是对inline-block起作用的，且元素不能是浮动的。 转载于:https://www.cnblogs.com/kugeliu/p/7196680.html...
css禁止float浮动元素自动换行/定位问题
热门推荐
我的笔记
04-09 1万+
n个这个元素(总小100000px); 关键就是在hidden元素内部再放一个div,然后设置足够大的空间,容浮动对象,不让它碰到到边而换行. 如果浮动+定位position配合,将需要给浮动元素的父元素加上width和height,要不,可能会出现父元素虽然经过清除浮动还是0空间大小,而显示不出内容
white-space: nowrap; 行内元素不换行
最新发布
06-14
### 使用 `white-space: nowrap;` 实现行内元素不换行并添加注释 在 CSS 中，`white-space` 属性用于指定如何处理元素内的空白符[^1]。当需要确保行内元素不换行时，可以使用 `white-space: nowrap;`。以下是一个详细的代码示例和注释： ```css /* 确保容器内的文本不会自动换行 */ .wrap { white-space: nowrap; /* 设置元素内的文本为不换行模式，所有内容将保持在同一行上显示[^1] */ overflow: hidden; /* 隐藏超出容器宽度的内容，防止内容溢出到外部 */ text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示被截断的部分 */ max-width: 300px; /* 设置最大宽度以限制容器的宽度 */ } ``` #### 解释 - `white-space: nowrap;`：该属性值会阻止文本在到达容器边界时自动换行，确保所有内容保持在同一行上显示[^1]。 - `overflow: hidden;`：此属性用于隐藏超出容器宽度的内容，避免内容溢出到外部。 - `text-overflow: ellipsis;`：当文本超出容器宽度时，使用省略号（...）来表示被截断的部分。 #### 示例效果 以下是一个完整的 HTML 和 CSS 示例，展示如何使用 `white-space: nowrap;` 来实现行内元素不换行的效果： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>White-Space No-Wrap Example</title> <style> .wrap { white-space: nowrap; /* 设置文本为不换行模式 */ overflow: hidden; /* 隐藏超出容器宽度的内容 */ text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */ max-width: 300px; /* 设置容器的最大宽度 */ border: 1px solid #ccc; /* 添加边框以便观察效果 */ padding: 5px; /* 添加内边距以改善视觉效果 */ } </style> </head> <body> <div class="wrap"> 这是一段非常长的文本，用于测试 white-space: nowrap; 的效果。确保文本不会换行并且超出部分用省略号表示。 </div> </body> </html> ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值