1. word-break:break-all;只对英文起作用,以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用,强制换行
4. white-space:nowrap; 强制不换行,都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码:
.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/

注意,一定要指定容器的宽度,不然的话是没有用的。

注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用break-all 。

注意,兼容火狐浏览器强制英文换行:

<div style="word-wrap:break-word; white-space:normal; word-break:break-all; width:150px;">英文内容</div>

CSS强制英文、中文换行与不换行 强制英文换行的更多相关文章

  1. 中文里带半角空格导致的Text换行问题[Unity]

    0x01 问题 最近策划反映了个问题,游戏里的多行文本会出现提前换行的问题,如下图所示: 文本错误地提前换行,导致第一行文本后面有大块空白区域 通过观察可以发现,当字符串中带有半角空格,且半角空格后面 ...

  2. css给span加float:right右浮动后内容换行下移

    转自:https://www.jb51.net/css/67309.html 在div css布局中 当span标签右浮动时会产生换行狭义的现象 <!DOCTYPE html PUBLIC &q ...

  3. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  4. td中不包含汉字的字符串不换行,包含汉字的能换行的问题原因及解决方法

    今天项目中遇到一个问题,一长串的字符串如:003403FF0014E54016030CC655BC3242,但是如:中国河北省石家庄市裕华区槐安路雅清街交口 这样的就可以换行. 原因是:英文字母之间如 ...

  5. html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...

  6. 【转载】 C++中回车换行(\n\r)和换行(\r)的区别

    原文:http://blog.csdn.net/xiaofei2010/article/details/8458605 windows下的点一下回车,效果是:回车换行,就是\r\n unix系统下的回 ...

  7. Perl字符集[\d\D]表示任何字符(所有数字和非数字,包括换行符),“.”表示除了换行符以外的所有字符。

    Perl字符集[\d\D]表示任何字符(所有数字和非数字,包括换行符),“.”表示除了换行符以外的所有字符.

  8. Nginx环境下,PHP下载,中文文件,下载失效(英文可以下载)怎么解决呢?

    参考出处: http://www.imooc.com/qadetail/76393 Nginx环境下,PHP下载,中文文件,下载失效(英文可以下载)怎么解决呢? 背景介绍: 文件名  为英文时可以下载 ...

  9. CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉

    *:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...

  10. css是如何实现在页面文字不换行、自动换行、强制换行的

    强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...

随机推荐

  1. Android驱动入门-LED--HAL硬件访问服务层②

    硬件平台: FriendlyARM Tiny4412 Cortex-A9 操作系统: UBUNTU 14.04 LTS 时间:2016-09-21  16:58:56 为了避免访问冲突,则创建了硬件访 ...

  2. noip模拟赛(10.4) 字典序(dictionary)

    [题目描述] 你需要构造一个1~n的排列,使得它满足m个条件,每个条件形如(ai,bi),表示ai必须在bi前面.在此基础上,你需要使它的字典序最小. [输入数据] 第一行两个正整数n,m.接下来m行 ...

  3. java.io.IOException: 您的主机中的软件中止了一个已建立的连接解决办法

    问题现象和http://hi.baidu.com/cara_cloud/item/193a3ee327546d395a2d64be描述的一样,就是在eclipse的console栏中一直显示java. ...

  4. Spring JPA Junit 关闭自动回滚

    因为用了JPA配合Hibernate ,采用注解默认是开启了LayzLoad也就是懒加载,所以不得不在Junit的单元测试上加上@Transactional注解 这样Spring会自动为当前线程开启S ...

  5. Moom for mac 最棒的窗口管理软件

    win7下,鼠标拖动窗口向左.右,两个窗口就在一个桌面上平分秋色了 mac下只能使用三只爪向上的手势查看当前桌面运行的程序,或者三只爪左右滑动查看全屏显示的其他程序,有时候一边看书一边敲代码很不方便 ...

  6. eclipse服务器add and remove 工程时出现there are no resources that can be added or removed from the server

    网上的解决方法: 解决方法: 第1步.新建一个“Dynamic Web Project” 第2步.把新建项目里面的.project文件和.settings文件夹复制到导入的那个项目里面. 可是我发现: ...

  7. POJ 3259 Wormholes (判负环)

    Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 46123 Accepted: 17033 Descripti ...

  8. GIT常用命令备忘

    Git配置 git config --global user.name "storm" git config --global user.email "stormzhan ...

  9. SUBLIME TEXT 2中,光标移入移出括号的快捷键设置

    无赖右方向键→和End键都在键盘的另一边,每次输入完一个函数,光标在各种括号中间,有什么更好的方式将光标移出来呢?在Sublime Text 2中,我们可以自己设置快捷键: { "keys& ...

  10. WampServer下如何实现多域名配置(虚拟域名配置)

    之前在学习跨域的时候,我写过一篇叫做WampServer下使用多端口访问的文章,默认的 localhost 采用的是 80 端口,能使用多端口访问的核心是得新建一个端口,也就是新建一个 http 服务 ...