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 ...
随机推荐
- IDF实验室WORD隐写术
上帝也哭泣http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=48 下载下来,发现是一个word文档,看来信息应该就 ...
- vijos1059 积木城堡[n年浙江省队第X轮](背包的方案总数 or 01背包)
描述 XC的儿子小XC最喜欢玩的游戏用积木垒漂亮的城堡.城堡是用一些立方体的积木垒成的,城堡的每一层是一块积木.小XC是一个比他爸爸XC还聪明的孩子,他发现垒城堡的时候,如果下面的积木比上面的积木大, ...
- bzoj2548[Cstc2002]灭鼠行动
Description 最近,有一些繁殖力很强的老鼠在下水道非常猖獗,灭鼠特工队正在计划消灭这些老鼠.下水道只有东西方向和南北方向的管道,如图所示. 灭鼠特工队的队员拥有强大的武器.他们将在某些时刻t ...
- PL/SQL Block Structure
[顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日之功) 继上四篇:ORACLE PL/SQL编程之八:把触发器说透 ORAC ...
- html post和get的区别
一直以来,都对这两个概念有一个感性的认识,今天总结一下: 1.Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据. 2.Get将表单中数据的按照variable=value的形式,添加 ...
- BZOJ 1009 【HNOI2008】 GT考试
Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...
- Android属性(property)机制
1. 属性简介 Android里有很多属性(property),每个属性都有一个名称和值,他们都是字符串格式.这些属性定义了Android系统的一些公共系统属性.比如: [dalvik.vm.dexo ...
- Python-01-基础
一.安装Python 官方下载地址:https://www.python.org/downloads/ Windows可直接下载安装,安装时勾选自动配置环境变量即可. Linux/OS X默认装有Py ...
- c++基础 explicit
c++的构造函数也定义了一个隐式转换 explicit只对构造函数起作用,用来抑制隐式转换 看一个小例子 新建一个头文件 #ifndef CMYSTRING_H #define CMYSTRING_H ...
- Java 基础【07】线程同步锁的选择
在需要线程同步的时候如何选择合适的线程锁? 例:选择可以存入到常量池当中的对象,String对象等 public class SyncTest { private String name = &quo ...