CSS强制换行和禁止换行代码
一、强制换行
1、word-break: break-all; 只对英文起作用,以字母作为换行依据。
2、word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
3、white-space: pre-wrap; 只对中文起作用,强制换行。
word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于:
1、word-break:break-all
假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。
2、word-wrap:break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。
各自的效果演示如下:
<div style="width:450px; word-break: break-all;">
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
<div style="width:450px; word-wrap: break-word;">
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
<div style="width:450px; white-space: pre-wrap;">
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>
Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
呵呵,我们看到的效果,好象并不是所说的那样,可能是现在浏览器的版本不同了吧。一般地说,对于强制换行,用word-wrap: break-word; 就可以了。
二、禁止换行
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; 是禁止换行。
overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。
原文来源:http://gongwen.sinaapp.com/article-138-cmd
CSS强制换行和禁止换行代码的更多相关文章
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS 中的强制换行和禁止换行
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- CSS 强制换行和禁止换行强制换行 和禁止换行样式
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
- CSS - 强制换行和禁止换行强制换行 和禁止换行样
强制换行 word-break: break-all; 只对英文起作用,以字母作为换行依据. word-wrap: break-word; 只对英文起作用,以单词作为换行依据. whi ...
- 转css中文英文换行、禁止换行、显示省略号
css中文英文换行.禁止换行.显示省略号 原创 2016年08月09日 14:20:01 word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:brea ...
- CSS强制英文、中文换行与不换行 强制英文换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...
- CSS强制英文、中文换行与不换行
.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px ...
- css 强制 中文、英文 换行
.livechat-text a { display: block; word-break:break-all; /* 英文换行 */ white-space:normal; /* 中文换行 */ } ...
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
随机推荐
- for练习.html
<script> 偶数 var str=""; for (var i = 1 ; i <= 100; i++){ if (i%2 == 0) { //str = ...
- CF603EPastoral Oddities
/* LCT管子题(说的就是你 水管局长) 首先能得到一个结论, 那就是当且仅当所有联通块都是偶数时存在构造方案 LCT动态加边, 维护最小生成联通块, 用set维护可以删除的边, 假如现在删除后不影 ...
- QQ号码正则判断
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- django之前-----web应用与框架
一web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S. 下面来看一个简 ...
- myeclipse内存调整
内存调整: myeclipse.ini里配置后 1.设置Default VM Arguments 在myEclipse中,打开Windows-> Preferences->Java-> ...
- demo: 全页面CSS3动画的一个参考例子
全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src ...
- Maven概念模型
两个核心 1.依懒管理:对jar包管理 2.项目构建管理:通过命令进行项目构建管理
- <转载>css3 概述
参照 https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ http://www.cnblogs.com/ghost-xyx/p ...
- elk收集windows日志
参考网站:https://www.secpulse.com/archives/55636.html https://blog.csdn.net/qq_38094271/article/details/ ...
- 使用Shiro登录成功后,跳转到之前访问的页面实现
转:http://blog.csdn.net/lhacker/article/details/20450855 很多时候,我们需要做到,当用户登录成功后,跳转回登录前的页面.如果用户是点击" ...