Heim  >  Artikel  >  Web-Frontend  >  CSS网页布局中 DIV和TABLE超出宽度自动换行的情况分析_html/css_WEB-ITnose

CSS网页布局中 DIV和TABLE超出宽度自动换行的情况分析_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:28:041574Durchsuche

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,在52CSS.com中不乏这方面的文章,现在总结一下CSS如何实现换行的方法,只要在CSS中定义了如下句子,可保网页不会再被撑开了。

  对于div,p等块级元素
  正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

Example Source Code [www.52css.com]

  html 
  

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

  css 
  #wrap{white-space:normal; width:200px; }
  IE浏览器
  连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行

Example Source Code [www.52css.com]

  html 
  

52csscom52csscom52csscom52csscom52csscom52csscom

  css 
  #wrap{word-break:break-all; width:200px;}
  或者 

Example Source Code [www.52css.com]

  #wrap{word-wrap:break-word; width:200px;}


  Firefox浏览器
  连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题, 剧情家我们只有让超出边界的字符隐藏或者,给容器添加滚动条

Example Source Code [www.52css.com]

  html 
  

52csscom52csscom52csscom52csscom52csscom52csscom

  css 
  #wrap{word-break:break-all; width:200px; overflow:auto;}
  对于table元素

  IE浏览器

  一、使用 table-layout:fixed;强制table的宽度,多余内容隐藏 

Example Source Code [www.52css.com]

52csscom52csscom52csscom52csscom52csscom52csscom
 
  二、使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行 

Example Source Code [www.52css.com]

52csscom52csscom52csscom52csscom52csscom52csscom 52csscom52csscom52csscom52csscom52csscom52csscom
 
  三、在td,th中嵌套div,p等采用上面提到的div,p的换行方法

  Firefox浏览器

  一、使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用 

Example Source Code [www.52css.com]

 
 
 
52csscom52csscom52csscom52csscom52csscom52csscom52csscom52csscom52csscom52csscom52csscom52csscom
 
  二、在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。
  最佳CSS定义换行代码 

Example Source Code [www.52css.com]

  .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn