一、强制换行
      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; 就可以了。
二、禁止换行
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      white-space:nowrap; 是禁止换行。 
      overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。 
      text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。

原文来源:http://gongwen.sinaapp.com/article-138-cmd

CSS强制换行和禁止换行代码的更多相关文章

  1. CSS 强制换行和禁止换行学习

    强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...

  2. CSS 中的强制换行和禁止换行

    强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...

  3. CSS 强制换行和禁止换行强制换行 和禁止换行样式

    强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. ...

  4. CSS - 强制换行和禁止换行强制换行 和禁止换行样

    强制换行 word-break: break-all;       只对英文起作用,以字母作为换行依据. word-wrap: break-word;   只对英文起作用,以单词作为换行依据. whi ...

  5. 转css中文英文换行、禁止换行、显示省略号

    css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01   word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...

  6. CSS强制英文、中文换行与不换行 强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  7. CSS强制英文、中文换行与不换行

    .p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px ...

  8. css 强制 中文、英文 换行

    .livechat-text a { display: block; word-break:break-all; /* 英文换行 */ white-space:normal; /* 中文换行 */ } ...

  9. Web前端设计:Html强制不换行<nobr>标签用法代码示例

    在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...

随机推荐

  1. (转)C#读写共享文件

    原文地址:https://www.cnblogs.com/guohu/p/4694515.html using System; using System.Collections.Generic; us ...

  2. 《linux性能及调优指南》 3.5 网络瓶颈

    3.5 Network bottlenecks A performance problem in the network subsystem can be the cause of many prob ...

  3. mysql数据库优化(二)

    1.sql防止注入 https://www.cnblogs.com/sevck/p/6733702.html 结果: C:\Users\ASUS\kuaigong3.6.5\lib\site-pack ...

  4. day23面向对象编程基础

    面向对象编程基础1.面向过程的编程思想    核心过程二字,过程指的是解决问题的步骤,即先干什么\再干什么\后干什么    基于该思想编写程序就好比在设计一条流水线,是一种机械式的思维方式    优点 ...

  5. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  6. python tkinter chk

    视频过程中的练习, 可以在python2.7下运行. 001: hello,world: 1 2 3 4 5 6 from Tkinter import Label, Tk root = Tk() t ...

  7. 15.unbuntu下安装vmware-tools

    链接地址:https://blog.csdn.net/yuanxiang01/article/details/78787823

  8. 《算法》第四章部分程序 part 17

    ▶ 书中第四章部分程序,包括在加上自己补充的代码,无环图最短 / 最长路径通用程序,关键路径方法(critical path method)解决任务调度问题 ● 无环图最短 / 最长路径通用程序 pa ...

  9. php 目录

    1.laravel pswd  oauth2 2.理解二叉树 3.IOC容器 4.微信支付 4.1 微信支付申请 5.DI 6.支付宝 支付H5 7.html 转 word 8.php-fpm 启动详 ...

  10. DDD随笔-Axon

    1. 命令处理程序从存储库中检索域对象(聚合)并执行它们的方法来更改它们的状态.这些聚合通常包含实际的业务逻辑,因此负责维护自己的状态.聚合的状态变化导致产生领域事件.领域事件和聚合形成领域模型. 2 ...