s
当前位置:网站首页 >> 种植基地 >> 红薯科普
div+css教程 如何强制css换行 如何禁止css换行
日期:2017-11-28     来源:     浏览次数:46

css强制不换行写法

word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

css强制换行写法

word-break:break-all;
word-wrap:break-word;

 

中维互联网络建站专家在编写移动端css 的时候,发现有的长网址和a链接有的时候会溢出层,怎么调整都不好使,最终还是使用了css 的强制换行来解决的问题,那么小编中维互联网络就对于css 的强制换行和强制不换行的详细整理,以后大家再遇到类似问题的时候可以当做参考。


      css文字排版强行换行
      1、word-break: break-all;       只对英文起作用,以字母作为换行依据。
      2、word-wrap: break-word;   只对英文起作用,以单词作为换行依据。
      3、white-space: pre-wrap;     只对中文起作用,强制换行。 
      word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于:
      1、word-break:break-all  
      假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。
       2、word-wrap:break-word  
      例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。 
      各自的效果演示如下: 
<div style="width:450px; word-break: break-all;">
     Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。 
<div style="width:450px; word-wrap: break-word;">
     Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。 
<div style="width:450px; white-space: pre-wrap;">
     Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>

Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
      呵呵,我们看到的效果,好象并不是所说的那样,可能是现在浏览器的版本不同了吧。一般地说,对于强制换行,用word-wrap: break-word; 就可以了。


    css 禁止换行
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      white-space:nowrap; 是禁止换行。 
      overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。 
      text- overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text- overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。 
  在这里overflow有几个值要说明一下:
  1.visible:对象随内容改变而改变
  2.auto:使对象根据自己的内容自动产生滚动条
  3.scroll:让对象一直拥有滚动条的存在.
这个特别适用于移动端的网站建设写css遇到的溢出层的问题,因为移动端宽度有限,所以css的强制换行和强制不换行是对网站制作非常有用的,希望可以帮到大家。