CSS的换行问题

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

这是代码，如果这样直接就被打开的话，IE下容器就会被撑破，FF下英文会会跳出容器

[html]  view plain copy print ?
  1. <!DOCTYPE HTML>  
  2. <div style='width:500px;height:200px;border:#ff0000 1px solid;'>  
  3. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbb aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  4. </div>  

百度搜索了一下，需要加上word-break或word-wrap,而且还需要加上overflow:hidden。

自己测试了一下，发现可以这样

[html]  view plain copy print ?
  1. <!DOCTYPE HTML>  
  2. <div style='width:500px;height:200px;border:#ff0000 1px solid;word-break:break-all;'>  
  3. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbb aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  4. </div>  

只加上一个word-break:break-all；

就可以解决一长串英文的“不规矩”，但是使用word-break会出现这种情况。看我内容里面，有个bbbbbbb 使用word-break的时候是强制切断的，所以遇到换行的时候他看上去就不像是一个完整的单词，而是上面有一些，下面又有一些。这样不好

所以改用word-wrap:break-word;

[html]  view plain copy print ?
  1. <!DOCTYPE HTML>  
  2. <div style='width:500px;height:200px;border:#ff0000 1px solid;word-wrap:break-word;'>  
  3. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbb aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  4. </div>  

这样就OK了，IE,FF下都显示正常，而且不会撑破容器。

但是网上说的需要加个overflow:hidden，这个我不知道加在这里面对内容有什么用，加与不加不会影响里面的内容，只会说明容器是否能自动增长。

wjqiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS自动换行
02-02
自动换行五种策略，兼容IE Chrome Firefox
CSS 网页内容换行控制
09-27
其中，文本的换行管理是CSS中不可或缺的一部分，尤其是在DivCSS布局中，良好的换行控制可以使得网页内容更加整洁、易读。本文将系统地介绍CSS中用于控制换行的四种主要属性：`white-space`、`word-break`、`word-...
css换行
热门推荐
q1424966670的博客
08-16 2万+
word-wrap:break-word;/*换行，但是在文本和数字之间换行*/ word-break:break-all;/*强制到末尾换行*/
css - 换行
白白白la的专栏
01-12 414
在一个div设置了宽度为300PX的样式，中文可以自动转行、换行，但是连续英文和数字则会撑破设置的300px宽度。 这时我们只需要在对应的div中加入css样式word-wrap:break-word ;
CSS强制换行对齐的实现方法
09-25
主要为大家介绍了CSS强制换行对齐的实现方法,涉及css中text-justify属性的使用技巧,需要的朋友可以参考下
CSS控制文本自动换行的问题
10-30
CSS控制文本自动换行的问题 在网页设计中，CSS控制文本自动换行的问题是一个常见的问题，尤其是在使用表格进行网页排版的时候。当我们遇到一段连续的英文词或者一堆感叹号（!!!）时，网页就会被撑开，影响网页的...
CSS 之强制换行技巧
09-25
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！
css float left布局换行不正常问题的解决
09-22
主要介绍了css float left布局换行不正常问题的解决的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css文字换行
m0_47843571的博客
12-25 1万+
字母换行：word-wrap: break-word; 单词换行：word-break: break-all; 文字换行：white-space:pre-wrap;
css 实现换行
最新发布
qq_33240556的博客
07-03 680
在CSS中，实现文本内容的换行非常直接。通常情况下，文本会自动根据其容器的宽度换行，这是默认行为。
CSS实现换行
weixin_72329752的博客
08-10 357
表示当文本超出边界时，自动将单词截断换行，但如果单词本身就很长，仍然会超出边界；表示任意位置换行，甚至可以在单词中间断开。但是会破坏单词完整性；
CSS文本换行
懒羊羊我小弟的博客
08-11 1万+
CSS文本换行处理 一、文本基本属性 white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit; 规定段落中的文本如何换行 normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。 nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。 Pre-wrap:：保留空白符序列，但是正常地进行换行。 Pre-l
【css】css换行 white-space，word-wrap，word-break
m0_45406092的博客
07-22 1753
word-wrap 允许长单词换行到下一行： p.test {word-wrap:break-word;} 我们来看个完整例子 <!DOCTYPE html> <html> <head> <style> p.test { width: 11em; border: 1px solid #000000; } </style> </head> &
css 自动换行
路漫漫的博客
06-03 2695
//为防止长单词溢出，遇到长单词会先重起一行，若长单词还是放不下，再在长单词内部断句 //word-wrap用的时候若不生效，加上flex-direction: column 试一下 .text-view { word-wrap: break-word; } // 遇到长单词时，直接在长单词中断句，不会重起一行 .text-view { word-break: break-al...
css 添加换行
weixin_33725272的博客
06-26 987
效果 姓名姓氏名字地址浙江省杭州市邮编code HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g...
tailwindcss换行
05-16
在Tailwind CSS中，可以使用以下类来控制换行： 1. `whitespace-normal`：默认情况下，文本中的换行符会被忽略。使用此类可以在文本中插入换行符。 ``` 这是一段需要换行的文本。第一行结束后，第二行应该从这里...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值