英文字符和汉字自动换行和不换行的设置

一、英文换行
Div p{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
Div p{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
注意:有的时候英文单词是一个整体不能拆开!!!(若不同浏览器将超出部分隐藏,可以添加:overflow:auto;)
二、中文换行以及强制不换行
Div p{white-space:pre-wrap;width:150px;}/*只对中文起作用,强制换行*/
Div p{white-space:nowrap;width:10px;}/*强制不换行,都起作用*/
三、强制不换行以及超出宽度部分文字隐藏
.p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/

要想兼容ie和ff,需设置white-space: nowrap;,这样设置,不论是英文还是汉字,也不管是否有空格都会不换行显示
注意:div或者p标签里面要有一个宽度才可以换行,要不然没有作用!!!

解释:

word-wrap和word-break
word-wrap用来控制换行
两种取值:
(1)normal
(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。) 
word-break用来控制断词
三种取值:
(1)normal
(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

white-space : normal | pre | nowrap   
  
normal  :  默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行   
  
pre     :  换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为   
            standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode,  
            此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象  
   
nowrap  :  强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。  
  
兼容性: IE5.5 +,  Firefox

原文地址:https://www.cnblogs.com/qdwz/p/12322950.html

时间: 2024-07-31 11:25:57

英文字符和汉字自动换行和不换行的设置的相关文章

英文字符和汉字自动换行和不换行的问题

问题: 因为是标题是英文结尾的,不能自动换行,导致有部分不能显示.界面拉伸到最大也不能全部显示,下边的正文是可以自动换行的. 原因: 连续长文字英文如果没空格不换行,中文自动换行. 解决: ord-break:break-all样式里面加这个就可以了.如: <div style="word-break:break-all;width:60px;overflow:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

基于stm32f4的ucGUI通过外部flash存储汉字库显示任意英文字符和汉字组合(控件可用)

在做一个用到ucGUI的项目的时候要用到不定的汉字和英文字符,但是ucGUI本身又不支持读取芯片外部flash的字库来显示,于是查了下资料,如下: http://www.cnblogs.com/hiker-blogs/archive/2013/01/04/2843538.html 站在巨人的肩膀上,我找到了将汉字库写进flash后,通过ucGUI的控件显示出来的方法,但是至此,并不能在一个字符串里添加汉字和英文,用于同时显示,因为flash里面没有英文字符的模. 为了让一个控件同时显示汉字和英文

css一长串连续英文字符的换行

在标签内,中文的换行是没有什么问题的,但英文的换行就有问题.当出现一长串连续的英文字符时,换行就失效了,内容会溢出.解决这个问题只需要一行css就够了: p{ word-wrap: break-word; } 那么问题来了,英文的换行是实现了,但是你会发现,一连串英文全部另起一行了,这就和预计的效果不一致. 原因是连续的一连串英文字符,浏览器会把它识别为一个单词,那么换行当然是一个单词一起换了,解决这个问题只要在原本的基础上再加一句: p{ word-wrap: break-word; word

自动换行 属性,区分阿拉伯数字、字体、英文字符

style="word-break:break-all;word-wrap:break-word;" 自动换行 属性,区分阿拉伯数字.字体.英文字符,布布扣,bubuko.com

用js识别字符串中的英文字母字符和非字符(汉字)

前不久去阿里的在线笔试,最后一道题可算是难倒了我,题目大概是这样的:用原生的js实现字符串中的英文字母字符和汉字的识别,汉字按照两个单位计算,英文和字符按照一个单位计算,乍一想真不知道有什么好办法,以前写c代码太多,就用c代码对ascii的办法来,笔试结束字符才知道,js是很高大上的玩意儿,这招行不通.在这里我介绍一种很简单很靠谱的方法,用unicode字符集的办法来解决. 首先脑补一下小知识:unicode字符集数字0 - 128是英文字母字符(半角)的范畴,在这以外是其他字符(全角),用js

判断输入的内容(汉字、英文字符、数字)简单方法

<div> <label>输入:<input id="input_txt" type="text"></label><br> <button id="add-btn" onclick="text()">判断</button> </div> function text() { var input = document.getEleme

C#怎么判断字符是不是汉字

支持并尊重原创!原文地址:http://jingyan.baidu.com/article/2c8c281deb79ed0008252af1.html 判断一个字符是不是汉字通常有三种方法,第1种用 ASCII 码判断,第2种用汉字的 UNICODE 编码范围判 断,第3种用正则表达式判断,下面是具体方法. 1.用ASCII码判断 在 ASCII码表中,英文的范围是0-127,而汉字则是大于127,根据这个范围可以判断,具体代码如下: 调用方法:CheckStringChinese("是不是汉字

C#中如何判断一个字符是汉字

判断一个字符是不是汉字通常有三种方法,第一种用 ASCII 码判断,第二种用汉字的 UNICODE 编码范围判 断,第三种用正则表达式判断,以下是具体方法. 1.用ASCII码判断 在 ASCII码表中,英文的范围是0-127,而汉字则是大于127,具体代码如下: string text = "是不是汉字,ABC"; for (int i = 0; i < text.Length; i++) { if ((int)text[i] > 127) Console.WriteLi

[转]PHP判断字符串是纯英文、纯汉字或汉英混合(GBK)

PHP判断字符串是否为中文(或英文)的方法,除了正则表达式判断和拆分字符判断字符的值是否小于128 外还有一种比较特别的方法. 使用php中的mb_strlen和strlen函数判断 方法比较简单:分别使用以上两个函数以当前编码测出字符的返回值,然后比较返回值.返回值相等的为纯英文.纯数字.英数混排:返回值不等,且strlen返回值可被mb_strlen整除的为纯汉字返回值不等,且strlen返回值不可被mb_strlen整除的为英汉或数汉混排 看一下以下的例子: Php代码   <?php $