CSS实现强制换行的解决方法
强制换行用white-space的normal,pre-wrap,pre-line换行,即使有overflow: hidden; text-overflow: ellipsis;也不影响换行。
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 html 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
1、强制不换行
div{white-space:nowrap;
}
2、自动换行
div{ word-wrap: break-word; word-break: normal;}
3、强制英文单词断行
div{ 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 。
CSS实现强制换行的解决方法相关推荐
- React前端库,table中的每列内容,进行强制换行的解决方法
1.问题描述: 管理系统的前端实现用的是React+ant design,但是React的table,每列的值,如果用<br />或者/r/n 来实现,则还是换行无效.如下图,SN值是多个 ...
- html文字自动换行 ie,css 自动换行 强制换行属性 (firefox+ie)
css 自动换行 强制换行属性 (firefox+ie) 发布时间:2009-10-13 17:40:39 作者:佚名 我要评论 css 自动换行 强制换行属性,在实际应用中,如果不强制换行会 ...
- css防止高度塌陷,css之高度塌陷及其解决方法
浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...
- HTML文本错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断 随着WEB2.0标准化设计理念的普及,国内很 ...
- qlabel设置换行符无效_php 字符串中的\n换行符无效、不能换行的解决方法
例如下面的代码: echo 'hello\n'; echo 'world'; ?> 程序的中的换行符\n会直接输出,无法正确换行,解决方法是把单引号改为双引号: echo "hello ...
- 计算机锁定不能强制选项无法关机,Win10无法关机只能按电源强制关机的解决方法...
近期有用户称电脑无法关机了,只能通过主机上关机键强制关机才可以,遇到这个问题多数是系统的问题了.那么Win10无法关机怎么办?Win10无法关机只能强制关机的解决方法,可能性比较多,可以逐一尝试. 一 ...
- html 中的 css 的强制换行与不换行文本
html 中的 css 的强制换行与不换行文本 1. 强制换行 1. 强制不换行 1. 强制换行 text_wrap {white-space: pre-wrap;word-break: break- ...
- html使用div显示会错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断 随着WEB2.0标准化设计理念的普及,国内很 ...
- CSS英文单词强制换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有 ...
最新文章
- 图像处理之基于阈值模糊
- pythonweb框架Flask学习笔记05-简单登陆
- php和mysql web开发 笔记_PHP和MySQL Web开发读书笔记---创建Web数据库
- Linux下 -bash: php: command not found 命令找不到
- 流程图怎么切换_PPT中「较长的流程图」该如何清晰展现?
- iOS设计模式——委托(delegate)
- 使用Hystrix守护应用(1)
- IOS 公共类-数字处理
- docker php amqp 扩展,docker搭建rabbitmq,配合php-amqplib+supervisor使用(下)
- windows 子系统认识(1)
- 管理感悟:不要告诉主管只有一条路
- java虚拟机有什么作用_java虚拟机有什么用
- 线程创建常用的四种方式
- RCD钳位电路--选管
- 【周志华机器学习】线性模型
- Bagging和Boosting(偏差与方差)
- Android 内存被异常回收后直接重启APP
- Liunx 创建隐藏文件夹
- 《深入理解计算机系统》练习解析(持续更新)
- 电商API店铺订单接口(代码对接教程)
热门文章
- 【day8】【洛谷算法题】-P3954成绩-刷题反思集[入门1顺序结构][附一周思考总结]
- openFOAM动量方程中张量的处理
- DUTOJ-1003: Zeratul的军训游戏
- 卧槽!终于知道涛哥我为啥赚不到钱了
- 刘金琨智能控制(第2版)仿真实例代码整理
- 聚类(2)——层次聚类 Hierarchical Clustering
- 使用计算机生成景物图像,使用计算机生成假想景物的图像,其主要步骤是______。...
- 能ping通IP地址,ping不通主机名问题解决
- 移植iic--24c02和fdc2214
- 乌班图的世界——建立文件夹和空文件