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 ...
随机推荐
- 收集入侵Windows系统的证据
随着网络的不断扩大,网络安全更加会成为人们的一个焦点,同时也成为是否能进一步投入到更深更广领域的一个基石.当然网络的安全也是一个动态的概念,世界上没有绝对安全的网络,只有相对安全的网络.相对安全环境的 ...
- Emacs杂谈(一)Emacs环境 c++ 快捷键
最近头脑发热(抽),重装了电脑,改成linux的ubuntu系统,熟悉一下环境,顺便转载相关emacs知识. //插播一则通知:似乎linux上vector不能用,会内存炸错,若有人可以解答,请用评论 ...
- java问题小总结
1.在使用equals的时候,把 "".equals(name);放在左边 如果右边的没有初始化,可以避免出错. 2.对于 ObjectId id; 在mongodb里面对其进行 ...
- window.open与window.close的兼容性问题
window.open(页面地址url,打开的方式) 方法 打开一个新的窗口(页面) 如果url为空,则默认打开一个空白页面 如果打开方式为空,默认为新窗口方式打开 返回值:返回新打开窗口的windo ...
- rpc使用举例
#server.py from SimpleXMLRPCServer import SimpleXMLRPCServer def add(x,y): return x+y server=SimpleX ...
- 窗口 - dialog - 与后端交互
与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...
- web standards
http://www.w3.org/standards/ http://www.webstandards.org/learn/faq/#p213 http://www.w3.org/standards ...
- [转]分享php中四种webservice实现的简单架构方法及实例
FROM : http://www.itokit.com/2012/0417/73615_2.html 本人所了解的webservice有以下几种:PHP本身的SOAP,开源的NUSOAP,商业版的P ...
- git 保存本地更改而不需要推到远程
git commit 修改到本地分支 repo sync . 更新分支 git checkout local 切换到本地分支 git rebase 远程 更新远程分支到本地并且将本地分支节点推到最顶
- font和lineheight冲突。
font:14px bold arial; line-height:40px; 这样写font的话line-height不会有效,只要把font拆分写就有效,chrome ie ff下都是.