IE下,文字不自动换行

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

博客提及了CSS的white-space属性设置为nowrap，该属性用于控制元素内空白的处理方式，nowrap可防止文本换行。 
 white-space: nowrap;

关于IE标签LI文字换行问题
12-11
折腾好久了，搜了一下还真有牛人解决了这个问题。在使用UL和LI显示文字的时候，由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行，造成显示问题。 解决方法： 复制代码代码如下: ul li{ white-space:nowrap; } 看清楚了，是li 设置这个属性，不是ul。
css是如何实现在页面文字不换行、自动换行、强制换行的方法
09-27
根据给定文件，我们可以了解到如何利用CSS的不同属性实现文字不换行、自动换行和强制换行的三种效果。在页面排版中，合理地应用这些技术可以帮助我们处理各种复杂情况下的文本布局问题。 首先，实现页面文字不换行...
解决浏览器显示长数字不能自动换行或长字母不能换行的问题
weixin_33946020的博客
09-30 721
在网页中，如果出现长数字或长的字母组合时，如果不加以控制，它就会破坏网页的布局，控制不好可能就会显示不全，照成显示的数据丢失。虽然这种字符串一般不会出现，但是不加以控制，被某些有心的人钻了空子，就可能破坏整个网页的布局，得不偿失，今天我就来解决下这个问题。 首先看一下是什么问题： 例如： 1111111111111111111111111111111111111111111111111111...
IE下flex布局导致文字不自动换行的解决方案
weixin_42471170的博客
04-07 1329
问题文字不换行： 解决方案： 给flex的子项添加宽度的属性： width：100%
IE 不能支持自动换行 和 显示多个空白
shermen.wu
03-13 233
直接替换显示内容： value = StringUtils.ReplaceAll(value, "\\s\\s", "  "); 注意 是 替换2个空白！！     除去这个笨重的方法，可以使用css方法（尚未验证） http://www.wuxiwangzhanjianshe.cn/gg.asp?id=7449  ...
浏览器 过长文本 不换行 BUG
weixin_30621711的博客
10-19 318
浏览器把过长无空格文本作为一个单词来看待，所以不会换行，解决方法：word-break: break-all /*IE chorm*/ 火狐暂不支持，用hidden基本保证效果吧 转载于:https://www.cnblogs.com/yuchav/archive/2011/10/19/2217603.html...
div中英文无法自动换行的解决办法
12-11
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是...即可实现自动换行。添加后的div代码大致如下 div中英文自动换行 复制代码代码如下: <div style=”word-break:break-all;width:20px
css控制文字自动换行的实现方法
09-24
在网页设计中，控制文字自动换行是一个常见而重要的需求。若不加以控制，较长的文字可能会溢出其容器，导致布局混乱或者用户体验不佳。CSS提供了多种方式来实现文字的自动换行。 首先，块级元素如`<div>`和`<p>`在...
css表格单元格中的长文本如何实现自动换行
12-13
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当...
ie 英文文本不能自动换行
qq_38802125的博客
10-30 1461
给div设置宽高后 英文文本出现不能自动换行的情况
ie 浏览器的 textarea 自动换行 设置
小男孩儿
12-08 2727
IE    设置        属性                          style="word-wrap : break-word;"
IE中 文字自动换行问题
海风轻轻吹
06-15 2214
[img]http://dl.iteye.com/upload/attachment/0069/5719/248b09fb-6a7f-35ec-9096-2842f3fb9ef0.jpg[/img] 今天又遇到一件比较郁闷的事,页面显示本来好好的,结果随便打了一串字母就给撑乱了. 下图中是正常显示的结果,左边列表中的文字会自动换行 换成字母就不行了 --------------...
在IE及Firefox中强制内容不换行
织网e站
05-29 3195
要在IE浏览器及Firefox浏览器中强制某些内容（如文字或图像）不换行，可以采用在不换行的内容外层加上...标记符。如在DIV标记符中添加nowrap属性，则在IE浏览器中可以实现DIV标记符中的内容不换行，但是在Firefox浏览器中则不能实现不换行的效果，还是会自动换行。而使用...标记符，则不管是IE浏览器，还是Firefox浏览器，都会实现内容不换行。
IE可恶的自动换行
weixin_30952535的博客
09-13 190
View Code <p class="type"><a href="#" class="current">不限</a><b>|</b><a href="#">赛车类</a><b>|</b><a href="#">摩托类</a><b>|</b...
解决＜pre＞标签里的文本换行(兼容IE, FF和Opera等)
cherry_vicent的专栏
08-29 449
标签里的文本换行。
html文字自动换行 ie,css 自动换行 强制换行属性 (firefox+ie)
weixin_42503456的博客
06-03 357
css 自动换行 强制换行属性 (firefox+ie)发布时间：2009-10-13 17:40:39 作者：佚名 我要评论css 自动换行 强制换行属性，在实际应用中，如果不强制换行会导致页面变形很难看，所以用下面的方法，即可解决此类问题。语法：word-wrap : normal | break-word取值：normal :　 默认值 。允许内容顶开指定的容器边界break-wo...
解决IE6，IE7，IE8换行显示问题
caolijunmingyan的专栏
08-29 4510
问题描述： 当网页的内容显示的窗口不是全屏的时候，有些文字或按钮会换行显示，这时我们头疼的问题来。 在网上查找了一番，有的说如果应用了表格，应该设置表格为指定的宽度，而不应该用百分比来表示宽度，但是有的时候指定宽度是不能代替百分比表示宽度的，因为如果你指定固定宽度，网页的显示
解决 IE Firefox下 字符串不能自动换行（折行）问题
善上若水的专栏
04-09 5715
       昨天遇到了一个问题。是关于如果英文或数字字符串太长，在没有空格等分开的情况下 在网页里不能自动分行的问题（字符串会一直向右延伸，直到超出页面为止）。解决方法要求火狐和IE都要支持。 上网查了一下，查到了几个方法。现在总结一下。       首先是在网上查到了一种CSS方法，但仔细研究了一下，发现火狐不支持。方法如下：          使用   word-break:break
div中使用overflow：auto，数字超过宽度为什么不换行，文字换自动换行
最新发布
09-03
<think> 我们正在讨论CSS中关于文本换行和溢出处理的问题。用户的问题是：为什么在div中使用overflow:auto时，数字超过宽度不换行而文字会自动换行？ 需要结合引用内容来分析。引用中提到了white-space、word-break等属性，这些都是影响换行行为的关键。 根据引用[2]和[3]： - 默认情况下，white-space:normal（即正常的换行规则）会使得文本在遇到边界时换行。 - 但是，连续的英文字符和数字（通常被视为一个单词）在默认情况下不会因为宽度限制而断开，除非使用word-break:break-all等强制换行属性。 用户观察到的现象：数字不换行（出现横向滚动条），而文字（中文）自动换行。 原因分析： 1. 对于中文字符：每个汉字都是独立的，并且换行规则允许在任何汉字之间进行换行，所以当一行放不下时，会自动换行。 2. 对于连续的数字（或连续的英文字母）：浏览器将它们视为一个整体（一个单词），默认情况下不会在单词中间断开，所以当整个数字串的宽度超过容器宽度时，不会换行，而是出现横向滚动条。 解决方案（根据引用）： 我们可以使用word-break: break-all; 或 word-wrap: break-word; （在CSS3中，word-wrap已被overflow-wrap替代，但为了兼容性，两者都可以用）来强制换行。 其中： - word-break: break-all; 可以让单词在任意字符间断开。 - word-wrap: break-word; （或 overflow-wrap: break-word;）则会在单词内部无法容纳整个单词时才进行断开。 因此，如果希望连续数字也能像文字一样自动换行，可以设置： .expb { overflow: auto; border: 1px solid #00F; word-break: break-all; /* 或者使用 word-wrap: break-word; */ } 注意：引用[5]中同时使用了word-wrap和word-break，这种做法是为了确保兼容性。 总结原因：这是因为浏览器默认的换行行为对连续数字（或连续的英文字母）作为单词处理，不允许在中间断开，而中文则没有这个问题。 </think> 在`div`中使用`overflow:auto`时，数字超过宽度不换行而文字自动换行的原因源于浏览器默认的**文本换行规则**和**单词处理机制**，具体分析如下： ### 根本原因分析 1. **连续数字/字母被视为单词** 浏览器将连续的英文、数字序列（如`12345678901234567890`）视为**不可分割的单词**（类似超长英文单词）。根据CSS规范： - 默认行为（`white-space: normal`）只允许在空格、连字符或中日韩文字边界换行 - 数字序列无空格分隔时会被当作单个单词处理，导致不换行[^2][^3] 2. **汉字默认换行机制** 中文字符（CJK文本）每个字符都是独立语义单位，在`white-space: normal`下会自动在任意字符边界换行[^2][^3] 3. **overflow:auto的触发逻辑** ```css .expb { overflow: auto; /* 仅在内容超出容器尺寸时显示滚动条 */ width: 300px; /* 需明确定义宽度 */ } ``` - 数字序列：超出宽度时不换行 → 触发水平滚动条 - 中文文本：自动换行填充垂直空间 → 不触发滚动条（除非高度不足） ### 解决方案（强制数字换行） ```css .expb { overflow: auto; width: 300px; word-break: break-all; /* 关键属性：允许在任意字符间断行 */ white-space: normal; /* 确保遵循标准换行规则 */ } ``` 或组合使用： ```css .expb { overflow: auto; width: 300px; word-wrap: break-word; /* 优先尝试保留完整单词 */ word-break: break-word; /* 兼容性补充 */ } ``` ### 不同浏览器处理差异 | 浏览器 | 数字/字母序列行为 | 中文行为 | |--------------|-------------------------|-----------------------| | Chrome/Safari| 默认不换行（触发滚动条） | 自动换行 | | Firefox | 同Chromium内核 | 同Chromium内核 | | IE11 | 需`word-break:break-all`| 需`white-space:normal`[^3] | > **关键点**：数字序列的换行需要显式声明`word-break: break-all`覆盖浏览器默认的单词保护机制[^3][^5]，而中文换行由`white-space: normal`默认支持[^2][^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值