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

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>

时间: 2024-10-13 12:13:29

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

css实现强制不换行、自动换行、强制换行

1. 强制不换行,并且多行文字溢出显示省略号 .ellips{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ellips_line2,.ellips_line3{display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;} .ellips_line2{-webkit-line-clamp:2;} .ellips_line3{-webkit-li

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

转自:https://www.jb51.net/css/67309.html 在div css布局中 当span标签右浮动时会产生换行狭义的现象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns= "http://www

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

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助. 一.如何设定文字字体.颜色.大小等 font-style设定斜体,比如font-style:italic font-weight设定文字粗细,比如font-weight:bold font-size设定文字大小,比如font-size:12px line-heigh

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

今天项目中遇到一个问题,一长串的字符串如:003403FF0014E54016030CC655BC3242,但是如:中国河北省石家庄市裕华区槐安路雅清街交口 这样的就可以换行. 原因是:英文字母之间如果没有空格,系统认为是一个单词,就不会自动换行.汉字就没有这种情况. 解决办法: 用表格把要显示的内容装起来.在<table>标签中加入"style='TABLE-LAYOUT: fixed'",在需要强制单词换行的<td>标签中加入"style='wor

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

原文:http://blog.csdn.net/xiaofei2010/article/details/8458605 windows下的点一下回车,效果是:回车换行,就是\r\n unix系统下的回车一下就是一个\n 给出如下代码: #include <iostream> using namespace std; int main() { cout << "this is the first line\n"; cout << "this

C++中回车换行(\n\r)和换行(\r)的区别

windows下的点一下回车,效果是:回车换行,就是\r\n unix系统下的回车一下就是一个\n 给出如下代码: [cpp] view plain copy print? #include <iostream> using namespace std; int main() { cout << "this is the first line\n"; cout << "this is the second line\r"; cou

截取文本,区分中英文字符,中文算两个长度,英文算一个长度

/// <summary>    /// 截取文本,区分中英文字符,中文算两个长度,英文算一个长度   /// </summary>   /// <param name="str">待截取的字符串</param>   /// <param name="length">需计算长度的字符串</param>   /// <returns>string</returns>   p

Css中常用中文字体的Unicode编码对照

在网页制作中,最常用的恐怕是字体属性了,在调整页面兼容的时候,也常常发现字体名称的原因导致不兼容或乱码,下面给出几种常用字体的ucicode编码对照,方便使用. 宋体 SimSun \5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 新宋体 NSimSun \65B0\5B8B\4F53 新细明体

菜鸟随笔(1)---Windows、Unix、Mac不同操作系统的换行问题 回车符\r和换行符\n

一只菜鸟横空出世,码农世界闯一闯,每天进展多一丢丢. Windows.Unix.Mac不同操作系统的换行问题 回车符\r和换行符\n 一.概念: 换行符'\n'和回车符'\r' (1)换行符就是另起一行 --- '\n' 10 换行(newline) (2)回车符就是回到一行的开头 --- '\r' 13 回车(return) 所以我们平时编写文件的回车符应该确切来说叫做回车换行符 CR: 回车(Carriage Return) \rLF: 换行(Line Feed) \n 二.应用: (1)在

css实现页面文字不换行、自动换行、强制换行

强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{ word-break:break-all; } ============================================ CSS设置不转行: overflow:hidden 隐藏white-space:normal 默认 pre 换行和其他空白字符都将受到保护nowrap 强制在