css 自动换行

最新推荐文章于 2024-07-03 17:59:27 发布
最新推荐文章于 2024-07-03 17:59:27 发布
阅读量680 收藏
点赞数
分类专栏： css

参考地址：http://blog.csdn.net/shehun1/article/details/8545934


那年，那月，那日，那时，发现了一个Bug，英文字符在某些情况下没有自动换行。效果图如下：



对于这种大大影响界面美观的代码，肯定是在不同浏览器下不同文件有不同的编码方式所致，为解决此问题，本人先在不同浏览器下使用相同的代码进行测试，结果发现各种诡异的问题。最终，唯有一种CSS样式可以适应所有的浏览器，它就是下面的代码。

[css] view plain copy print ?
  1. <SPAN style="FONT-SIZE: 18px">width:200px;
  2. word-wrap:break-word ;
  3. word-break: break-all;</SPAN> 
width:200px;
word-wrap:break-word ;
word-break: break-all;

上面的代码出现的效果图如下：



为了方便各位博客针对此代码进行测试，本人写了一个测试文件，感兴趣的朋友，可以免费试用~~

[html] view plain copy print ?
  1. <SPAN style="FONT-SIZE: 18px"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
  5. <title>测试中英文换行问题</title>
  6. </head>
  7. <body>
  8. <div>
  9. <h1 style="font-weight:bold">用户自以为是的换行:style="width:200px"</h1>
  10. <div style="width:200px;">
  11. <span style="color:blue;font-weight:bold">宽度为200px下的中文测试数据：</span>
  12. <span style="width:200px">长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</span>
  13. <br>
  14. <span style="color:blue;font-weight:bold">宽度为200px下的英文测试数据：</span>
  15. <span style="width:200px">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
  16. <br>
  17. <span style="color:blue;font-weight:bold">宽度为200px下的特殊字符测试数据：</span>
  18. <span style="width:200px">长长长长长长长长长长长长长长长长长长长长长长长长............................................</span>
  19. <br>
  20. <span style="color:blue;font-weight:bold">宽度为200px下的数字测试数据：</span>
  21. <span style="width:200px">000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</span>
  22. </div>
  23. <h1 style="font-weight:bold">用户自以为是的换行:style="width:200px;word-wrap:break-word ;"</h1>
  24. <div style="width:200px;word-wrap:break-word ;">
  25. <span style="color:blue">宽度为200px下的中文测试数据：</span>
  26. <span>长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</span>
  27. <br>
  28. <span style="color:blue">宽度为200px下的英文测试数据：</span>
  29. <span>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
  30. <br>
  31. <span style="color:blue">宽度为200px下的特殊字符测试数据：</span>
  32. <span>长长长长长长长长长长长长长长长长长长长长长长长长..............................................</span>
  33. <br>
  34. <span style="color:blue">宽度为200px下的数字测试数据：</span>
  35. <span>000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</span>
  36. </div>
  37. <h1 style="font-weight:bold">用户自以为是的换行:style="width:200px;word-wrap:break-word ;word-break: break-all;"</h1>
  38. <div style="width:200px;word-wrap:break-word ;word-break: break-all;">
  39. <span style="color:blue">宽度为200px下的中文测试数据：</span>
  40. <span>长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</span>
  41. <br>
  42. <span style="color:blue">宽度为200px下的英文测试数据：</span>
  43. <span>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
  44. <br>
  45. <span style="color:blue">宽度为200px下的特殊字符测试数据：</span>
  46. <span>长长长长长长长长长长长长长长长长长长长长长长长长..............................................</span>
  47. <br>
  48. <span style="color:blue">宽度为200px下的数字测试数据：</span>
  49. <span>000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</span>
  50. </div>
  51. </div>
  52. </body>
  53. </html></SPAN> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>测试中英文换行问题</title>
</head>
<body>
	<div>
		<h1 style="font-weight:bold">用户自以为是的换行:style="width:200px"</h1>
		<div style="width:200px;">
			<span style="color:blue;font-weight:bold">宽度为200px下的中文测试数据：</span>
			<span style="width:200px">长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</span>
			<br>
			<span style="color:blue;font-weight:bold">宽度为200px下的英文测试数据：</span>
			<span style="width:200px">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
			<br>
			<span style="color:blue;font-weight:bold">宽度为200px下的特殊字符测试数据：</span>
			<span style="width:200px">长长长长长长长长长长长长长长长长长长长长长长长长............................................</span>
			<br>
			<span style="color:blue;font-weight:bold">宽度为200px下的数字测试数据：</span>
			<span style="width:200px">000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</span>
		</div>
		<h1 style="font-weight:bold">用户自以为是的换行:style="width:200px;word-wrap:break-word ;"</h1>
		<div style="width:200px;word-wrap:break-word ;">
			<span style="color:blue">宽度为200px下的中文测试数据：</span>
			<span>长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</span>
			<br>
			<span style="color:blue">宽度为200px下的英文测试数据：</span>
			<span>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
			<br>
			<span style="color:blue">宽度为200px下的特殊字符测试数据：</span>
			<span>长长长长长长长长长长长长长长长长长长长长长长长长..............................................</span>
			<br>
			<span style="color:blue">宽度为200px下的数字测试数据：</span>
			<span>000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</span>
		</div>
		<h1 style="font-weight:bold">用户自以为是的换行:style="width:200px;word-wrap:break-word ;word-break: break-all;"</h1>
		<div style="width:200px;word-wrap:break-word ;word-break: break-all;">
			<span style="color:blue">宽度为200px下的中文测试数据：</span>
			<span>长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</span>
			<br>
			<span style="color:blue">宽度为200px下的英文测试数据：</span>
			<span>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</span>
			<br>
			<span style="color:blue">宽度为200px下的特殊字符测试数据：</span>
			<span>长长长长长长长长长长长长长长长长长长长长长长长长..............................................</span>
			<br>
			<span style="color:blue">宽度为200px下的数字测试数据：</span>
			<span>000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</span>
		</div>
	</div>
</body>
</html>
zimufuzi
关注
专栏目录
css如何实现自动换行,CSS实现自动换行的方法
weixin_29982199的博客
08-04 5万+
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div1、(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}...
CSS 文本自动换行
weixin_65635437的博客
06-02 7255
CSS 文本自动换行
CSS——css 文字自动换行方法
qq_43201350的博客
01-07 3154
CSS——css 文字自动换行方法
css控制div自动换行
lanfeng330的专栏
05-20 4255
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义css#wrap{w
CSS自动换行、强制不换行、强制断行、超出显示省略号
WUXIANJINBU的博客
06-18 360
标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，我当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是最近的项目中发现，使用 ajax 加载数据之后，设置强制将英文单词断行，需要将行内元素设置为块级元素。先给出各种方式，再具体介绍每一个属性。
firefox css自动换行的实现方法
10-30
### Firefox CSS自动换行的实现方法 随着网页设计与开发技术的发展，良好的用户体验越来越成为网页设计的核心要素之一。其中，文本的排版处理是至关重要的环节。本文将详细介绍如何在Firefox浏览器中实现CSS自动...
css 自动换行 强制换行属性 (firefox+ie)
12-12
允许内容顶开指定的容器边界 break-word :　内容将在边界内换行。如果需要，词内换行( word-break )也将发生 说明： 设置或检索当当前行超过指定容器的边界时是否断开转行。 此属性仅作用于有布局的对象，如块对象。...
css自动换行 css自动换行 css自动换行
10-27
css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行
css自动换行 防止撑破div影响排版
09-25
CSS自动换行是网页设计中常见的需求，尤其是在处理可能由于连续英文字符或数字导致div容器过度扩张时。为了解决这一问题，CSS提供了几种属性来控制文本的换行行为，确保页面布局的整洁和可读性。 首先，了解CSS中的...
css 实现换行
最新发布
qq_33240556的博客
07-03 3209
在CSS中，实现文本内容的换行非常直接。通常情况下，文本会自动根据其容器的宽度换行，这是默认行为。
html5 css不换行文字,css怎么让字体不换行？
weixin_33791941的博客
06-07 502
在html中，连续的数字和字母，以及字母和数字的组合是不会自动换行的；而中文字体会自动换行。那么如何让中文字体不换行？下面给大家介绍一下，希望对大家有所帮助。在css中，可以使用white-space属性来强制文字字体不换行；通常我们使用white-space:nowrap来强制文本文字内容不换行，文本会在在同一行上显示，直到遇到 标签为止。示例：div {width: 120px;height...
CSS 中几种常用的换行方法
热门推荐
m0_47791238的博客
10-12 3万+
white-space 属性可以控制元素中文本的换行方式。word-break 属性可以控制单词在换行时的断开方式。：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。（默认值）：文本自动换行，默认情况下会根据容器的大小自动换行。：保留原始的空白符（空格和换行符），文本按照源码中的格式显示。：保留原始的空白符，文本在遇到边界时会自动换行。：合并连续的空白符，文本在遇到边界时会自动换行。：尽量保持多字母语言的连续性，适用于东亚语言。：文本不进行换行，超过容器宽度时会溢出。
CSS网页制作时实现自动换行的小技巧，2024阿里、网易、京东等大厂最新前端面试题
m0_57502067的博客
04-01 634
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】hina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】]( )**
CSS样式自动换行（总结）
qq_43437571的博客
07-17 1万+
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行 <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> #wrap { white-space: normal;
css过长文字自动换行
weixin_34151004的博客
04-19 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
开发中的文本换行问题
basycai的博客
01-08 1123
文本换行的一些样式属性： 1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用，强制换行 4. white-space:nowrap; 强制不换行，都起作用 5. white-space:nowrap; ov
css控制表格文字超过一定长度后自动换行
weixin_43908036的博客
12-19 4160
实现的效果如下: 其中右上角的标签其位置的css是:
css 控制自动换行,问题：css 自动换行；结果：CSS控制文本自动换行
weixin_28730403的博客
08-04 4716
CSS控制文本自动换行CSS控制文本自动换行,阅读CSS控制文本自动换行,1.你定死表格的宽度，即给表格一个宽度值(是 数值，不是百分比) 2.强制不换行div{//white-space：不换行;normal 默认;nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象white-space:nowrap; }自1.你定死表格的宽度，即给表格一个宽度值(是数值，不是百分比)2....
css自动换行
05-25
CSS中的自动换行可以通过 `word-wrap` 属性来实现。常用的取值有： - `break-word`：允许单词内换行，如果一个单词太长，不能在一行显示完全，会自动换行。 - `normal`：只在单词之间断行，不允许单词内换行。 - `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值