CSS 文字换行与不换行
1. 强制不换行
p{
white-space:nowrap;
}
2. 自动换行
p{
word-wrap: break-word;
word-break: normal;
}
3. 强制英文单词断行
p{
word-break:break-all; //*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。
}
4. CSS设置不转行:
overflow:hidden; 隐藏
white-space:normal; 默认
pre; 换行和其他空白字符都将受到保护
nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
5. 设置强行换行:
word-break:
normal ; //依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : //该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : //与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
英文不换行
CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果 建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题 以下引用word-break的说明, 注意word-break 是IE5+专有属性
语法: word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明: 设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
//单行用省略号
.one-line {white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
//两行省略号
.two-line {display:-webkit-box;display:box;overflow:hidden;text-overflow:ellipsis;-webkit-word-break:break-all;word-break:break-all;
-webkit-box-orient:vertical;box-orient:vertical;line-clamp:;-webkit-line-clamp:;}
用CSS让文字在一行内显示不换行的方法
一般的文字截断(适用于内联与块):
.txt-overflow{
display:block; /*内联对象需加*/
width:80px;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
CSS 文字换行与不换行的更多相关文章
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- css样式自动换行/强制换行
写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...
- css强制html不换行 css强制英文单词断行 重拾丢失的
css强制html不换行 css强制英文单词断行 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-brea ...
- 转:css实现强制不换行/自动换行/强制换行
css实现强制不换行/自动换行/强制换行 [日期:2007-08-22] 来源: 作者: [字体:大 中 小] 强制不换行 div{ white-space:nowrap;} 自动换行 div{ ...
- CSS控制Span强制换行、溢出隐藏
CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...
- css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的
想让文字换行必须要写的那几个css样式就略过了.当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,这时候加个word-wrap:break-word:就基本可以解决但是有种情况是它解决不了的 ...
- css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...
- css 文字换行控制
强制不换行 white-space:nowrap 强制不换行,并显示省略号 word-wrap: normal; text-overflow: ellipsis; white-space: nowra ...
随机推荐
- mongo13----application set与分片结合
replation set配合分片 打开3台服务器,B服务器()放configserv, C,D服务器(203.204)放置复制集 .203和192.168.1.204分别运行之前的sh start. ...
- Java正则表达式的用法
/** * 校验时间格式,正确则返回true * @param xxx * @return */ private static boolean checkDateFormat (String xxx) ...
- linux多线程编程入门
背景知识: 在前一个实训中我们介绍了进程,但有时人们认为用fork调用来创建新进程的代价太高.在这种情况下,如果能让一个进程同时做零件事情或至少看起来是这样将会非常有用.而且,你可能希望能有两件或更多 ...
- 全局Timestamp管理器 检测js执行时间
随手写了个小工具,主要为了测试不同混淆程度的javascript脚本的加载速度1. [代码]Timestamp.js (function() { if (typeof this.Timestamp = ...
- javascript 省、市、地县三级联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...
- svn回到历史的某个版本
svn回到历史的某个版本 分类: linux大类2011-08-05 10:25 7468人阅读 评论(0) 收藏 举报 svntortoisesvn svn回到历史的某个版本在代码的编写过程中,难免 ...
- settings.xml 文件配置
Maven 远程中央仓库:repo1.maven.org 通过 ping repo1.maven.org 查看该网络是否可以连接访问: 1. 设置代理 Plugin org.apache.maven. ...
- bootstrap-table 行合并和列合并,以及固定列宽度等问题
列合并和列宽度固定: .setWidth { table-layout: fixed; } .setWidth > thead > tr > th { width: 80px; } ...
- 转载:百为STM32开发板教程之十二——NAND FLASH
http://bbs.21ic.com/icview-586200-1-1.html 百为STM32开发板教程之十二——NAND FLASH 参考资料:百为stm32开发板光盘V3\百为stm32开发 ...
- [App Store Connect帮助]九、衡量 App 表现(1)分析和报告概述
App Store Connect 提供如下分析和报告,以衡量您 App 的表现并查看向您支付的最终付款. App 分析 通过 App Store 展示次数.产品页面查看次数.销售额.App 使用次数 ...