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>
CSS强制英文、中文换行与不换行 强制英文换行的更多相关文章
- 中文里带半角空格导致的Text换行问题[Unity]
0x01 问题 最近策划反映了个问题,游戏里的多行文本会出现提前换行的问题,如下图所示: 文本错误地提前换行,导致第一行文本后面有大块空白区域 通过观察可以发现,当字符串中带有半角空格,且半角空格后面 ...
- css给span加float:right右浮动后内容换行下移
转自:https://www.jb51.net/css/67309.html 在div css布局中 当span标签右浮动时会产生换行狭义的现象 <!DOCTYPE html PUBLIC &q ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- td中不包含汉字的字符串不换行,包含汉字的能换行的问题原因及解决方法
今天项目中遇到一个问题,一长串的字符串如:003403FF0014E54016030CC655BC3242,但是如:中国河北省石家庄市裕华区槐安路雅清街交口 这样的就可以换行. 原因是:英文字母之间如 ...
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...
- 【转载】 C++中回车换行(\n\r)和换行(\r)的区别
原文:http://blog.csdn.net/xiaofei2010/article/details/8458605 windows下的点一下回车,效果是:回车换行,就是\r\n unix系统下的回 ...
- Perl字符集[\d\D]表示任何字符(所有数字和非数字,包括换行符),“.”表示除了换行符以外的所有字符。
Perl字符集[\d\D]表示任何字符(所有数字和非数字,包括换行符),“.”表示除了换行符以外的所有字符.
- Nginx环境下,PHP下载,中文文件,下载失效(英文可以下载)怎么解决呢?
参考出处: http://www.imooc.com/qadetail/76393 Nginx环境下,PHP下载,中文文件,下载失效(英文可以下载)怎么解决呢? 背景介绍: 文件名 为英文时可以下载 ...
- CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉
*:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...
- css是如何实现在页面文字不换行、自动换行、强制换行的
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...
随机推荐
- Eclipse 代码自动提示的设置
1. eclipse代码自动提示设置.如何配置eclipse的代码自动提示功能(同时解决自动补全变量名的问题)? 2. http://www.iteye.com/topic/1120919 [C++] ...
- ASP.NET常用页面指令
1.<%@Page "属性"="值"%>指令 AutoEventWireup:指定页的事件是否自动绑定,默认值true为启用自动绑定. CodeBe ...
- js删除数据的几种方法
js 删除数组几种方法 var arr=['a','b','c']; 若要删除其中的'b',有两种方法: 1.delete方法:delete arr[1] 这种方式数组长度不变,此时arr[1]变为u ...
- C语言:关于socket的基础知识点
/** * ---结构体--- * * #include <sys/socket.h> * struct sockaddr { * unsigned short sa_family; * ...
- SQL Server 安装 功能详解
安装 SQL Server 功能 在“功能选择”页上,SQL Server 功能分为以下两个主要部分:实例功能和共享功能. “实例功能”表示为每个实例安装一次的组件,这样,您将具有它们的多个副 ...
- Lowest Common Ancestor of a Binary Tree
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- SHGetFileInfo函数详解
SHGetFileInfo函数: WINSHELLAPI DWORD WINAPI SHGetFileInfo( LPCTSTR pszPath, DWORD dwFileAttributes, SH ...
- LeetCode:Minimum Depth of Binary Tree,Maximum Depth of Binary Tree
LeetCode:Minimum Depth of Binary Tree Given a binary tree, find its minimum depth. The minimum depth ...
- BatsingJSLib 2.3、Ajax上传多个文件
//2.3Ajax上传单个或多个文件 //<input type="file" multiple="multiple"/> //参数:文件的表单JD ...
- Javascript中判断数组的正确姿势
在 Javascript 中,如何判断一个变量是否是数组? 最好的方式是用 ES5 提供的 Array.isArray() 方法(毕竟原生的才是最屌的): var a = [0, 1, 2]; con ...