关于word-break: break-all;

最新推荐文章于 2024-11-01 17:00:36 发布
最新推荐文章于 2024-11-01 17:00:36 发布
阅读量3.9k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 语言 xsl ie xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iezzuchen/article/details/5440174
本文介绍了解决XML文件中长英文文本显示不全的问题。通过在XSL样式表中使用word-break属性设置为break-all，使得IE浏览器可以正确地进行自动换行。详细解释了word-break的不同值及其适用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

对于XML文件，当我们向其中加入长的英文 文本时，会出现显示不全的情况。主要原因是IE不能自动换行。

 

解决办法是：在xsl样式表中加入word-break: break-all;

如: <col style="width:70ex;word-break:break-all;"/>

 


word-break的说明, 注意word-break 是IE5+专有属性

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。

iezzuchen
关注
word-break:break-all和word-wrap:break-word区别总结
12-08
关于这两个属性的浏览器兼容性，`word-break:break-all` 在IE5及以上版本支持，对于亚洲语言，它的行为类似于正常模式，但对于非亚洲语言，它允许任意字内的换行。而 `word-wrap:break-word` 则在IE5.5及以上版本...
webfrom-列表文本内容自动换行 word-break-keep-all;word-wrap-n.pdf
08-21
<asp:TemplateColumn HeaderText="OP CREATE USER" HeaderStyle-HorizontalAlign="center"> <HeaderStyle HorizontalAlign=... myDataGrid_d.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");
word-break:break-all和 word-wrap:break-word区别
南极光经验分享
04-12 735
  查看文章     自动换行word-break:break-all和word-wrap:break-word的区别2007-11-26 15:15
word-break: break-all;
也想快乐的生活
10-30 1223
以下文字来自舜子]的BLOG，转帖一下：今天网友 Dcboy 和我提到一个Bug,他说他的编辑框变形了。后来我看了他的代码发现编辑框没有自动换行。被文章中的英文撑开了。于是我告诉他，让他在skin的CSS里加上 word-break: break-all; 问题解决了。这个问题只有IE才有，我在FF下测试,FF可以自己加滚动条，这样也不影响效果。建议大家做Skin时，记得在body里加 word-
HTML属性word-break:break-all
LHX_ldm的博客
05-30 1万+
word-break:break-all和word-wrap:break-word的区别 word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行， 看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词 挪到下一行，而是直接进...
word-break:break-all是什么
奥特蛋的博客
04-23 4536
文本强制换行： .d1{ word-break:braak-all; }
word-break: break-all； 会使文本在容器边界自动换行，以防止文本溢出容器。示例
2302_76925238的博客
11-01 677
是一种 CSS 属性，用于控制文本的换行行为。它会强制打断单词，使文本在任何地方都可以换行，即使是在单词中间。这个属性在处理长文本或没有自然断点的内容时非常有用，比如长的英文单词、网址或文件路径。
CSS word-wrap同word-break的区别
12-11
word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。 word-wrap同word-break的区别 word-wrap: normal　Default. Content exceeds ...
浅析word-break work-wrap的区别
12-13
object.style.wordBreak="keep-all"   值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 兼容性： 举个栗子： CSS Co
word-break: break-all; 会让word break了换行
飞翔的熊blabla
08-27 1727
RTword-break: break-all; 会让word break了换行
CSS英文字符串换行（word-break: break-all 或者 word-wrap）
热门推荐
黄彪博客
01-28 2万+
文章参考 英文强制换行css 使用css强制英文单词断行代码 问题描述 在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)’，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug 解决过程 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于
文本自动换行样式word-break: break-all
weixin_44090040的博客
04-23 7971
未加该 word-break: break-all 样式时，联系地址数据加载完全，但是显示不全。全选复制可以得到所有字符。 加了 word-break: break-all 样式时，联系地址数据加载完全，换行显示出全部字符。
纯字母或纯数字不自动换行 word-break:break-all；与word-wrap:break-word的区别
djh052900的博客
05-11 4586
解决纯字母或纯数字不自动换行的问题， 文本自动换行样式 word-break:break-all；与word-wrap:break-word的区别
word-break：break-all、word-break：break-work和work-wrap：break-work的区别
Li Xue NH He 20151022
10-22 1301
word-break：break-all是自动换行。当一个单词到达边界时，下个字母会自动到下一行。 word-break：break-work也是自动换行。将整个单词看成一个整体，如果该行末端宽度不够显示整个单词时，会自动把整个单词放到下一行，而不会把单词截断。 work-wrap：break-work应用效果和word-break：break-work一样。
HTML元素中有中文、英文、符号、数字。第一行没排满就自动换行的解决办法：word-break:break-all的使用
江一铭
07-12 2772
是一个CSS属性，用于控制文本在容器中的换行方式。它的作用是强制在任意字符之间进行换行，即使这样可能会导致单词被分割。具体来说，word-breaknormal（默认值）：默认的换行行为。单词不会被分割，会根据容器的宽度自动换行。break-all：强制在任意字符之间进行换行，即使这样可能会导致单词被分割。这个值适用于不考虑单词边界的语言，比如中文、日文等。keep-all：不允许在单词内换行，只能在字符之间换行。这个值适用于考虑单词边界的语言，比如英文。使用。
CSS设置了word-break:break-all，输入中英文标点符号不换行问题
qq_43916187的博客
05-31 3625
/ 使用限制最少的换行符规则分隔文本。// 任意位置都可以作为换行点，包括任意的标点。// 使用最严格的换行符规则分隔文本。// 使用默认换行符规则分隔文本。// 使用最常见的换行符分割文本。但是如果输入了标点符号（中文或英文的标点符号），这种换行特性就失效了，即使设置。属性主要用在CJK语言中，也就是中日韩3种语言中，其中以中文和日文为主。属性也是无效的，此时可以用到的CSS属性是。就可以自动换行了，同时也不影响中英文换行。
word-break：break-all； 强制换行
Alice_LiLi的博客
05-25 1162
一般情况下，元素拥有默认的white-space:normal;；当录入的文字超过定义的宽度后会自动换行。 如果不想进行换行，可以使用white-space:nowrap； 当录入的数据是一堆没有空格的字符或字母或数字时，常规的white-space:normal；换行会失效，你会发现他会超出容器的范围并且不会自动换行。这个时候需要使用word-break：break-all；可以使单词进行换行。
word-wrap:break-word;word-break: break-all中文
最新发布
03-21
### 使用 `word-wrap` 和 `word-break` 实现换行效果 #### 属性解释 `word-wrap` 和 `word-break` 是 CSS 中用于控制文本换行行为的重要属性。 - **`word-wrap: break-word;`** 此属性主要用于处理超出容器宽度的内容，允许长单词或 URL 被拆分到下一行。它仅在必要时才会打断单词[^2]。 - **`word-break: break-all;`** 这一属性更加激进，会在任何字符处强行断开单词，即使不需要打破单词也会如此操作。这种特性非常适合包含大量英文或其他非亚洲语言的场景[^4]。 当应用于中文环境时，两者的区别主要体现在是否严格遵循语义分割上： - 对于纯中文内容来说，因为汉字之间不存在自然间隙（不像英文字母间存在空格），所以无论是采用 `word-wrap: break-word;` 或者是 `word-break: break-all;` 都能够正常工作并按需完成换行任务[^3]。 然而需要注意的是，在混合型文档——即既含有中文又夹杂着较长不可分割单元比如技术术语、链接地址等情况之下，则应仔细权衡选用哪一种策略更为合适[^1]。 以下是具体的应用实例以及代码展示部分: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Word Wrap & Break Example</title> <style> .example { width: 200px; border: 1px solid black; margin-bottom: 10px; } /* Using word-wrap */ .use-word-wrap { white-space: pre-line; word-wrap: break-word; } /* Using word-break */ .use-word-break { white-space: normal; word-break: break-all; } </style> </head> <body> <div class="example use-word-wrap">这是一个非常长的单个词语aaaaaaaaaaaaaaaabbbbbbbbbbbbcccccccccccddddddddddeeeeeeeeee。</div> <div class="example use-word-break">这是另一个例子：http://www.example.com/verylongurlthatneedstobebrokenintopieces.</div> </body> </html> ``` 以上HTML片段展示了两种不同方法的实际运用情况。第一个 div 利用了 `word-wrap: break-word;` 来优雅地处理超长字符串；而第二个则通过设置 `word-break: break-all;` 达到了同样的目的却可能破坏某些特定场合下的可读性[^5]。 ### 结论 综上所述，在实际开发过程中可以根据项目需求灵活选择合适的解决方案。如果是针对一般性的网页布局设计，并且希望保持较好的用户体验，则推荐优先考虑使用 `word-wrap: break-word;` 。但如果面对特殊情形如表格内部单元格溢出等问题，则可以尝试引入更加强硬的方式 —— 即启用 `word-break: break-all;`.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值