强制换行用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实现强制换行的解决方法相关推荐

  1. React前端库,table中的每列内容,进行强制换行的解决方法

    1.问题描述: 管理系统的前端实现用的是React+ant design,但是React的table,每列的值,如果用<br />或者/r/n 来实现,则还是换行无效.如下图,SN值是多个 ...

  2. html文字自动换行 ie,css 自动换行 强制换行属性 (firefox+ie)

    css 自动换行 强制换行属性 (firefox+ie) 发布时间:2009-10-13 17:40:39   作者:佚名   我要评论 css 自动换行 强制换行属性,在实际应用中,如果不强制换行会 ...

  3. css防止高度塌陷,css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

  4. HTML文本错位,DIV+CSS网页错位诊断和解决方法

    你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断 随着WEB2.0标准化设计理念的普及,国内很 ...

  5. qlabel设置换行符无效_php 字符串中的\n换行符无效、不能换行的解决方法

    例如下面的代码: echo 'hello\n'; echo 'world'; ?> 程序的中的换行符\n会直接输出,无法正确换行,解决方法是把单引号改为双引号: echo "hello ...

  6. 计算机锁定不能强制选项无法关机,Win10无法关机只能按电源强制关机的解决方法...

    近期有用户称电脑无法关机了,只能通过主机上关机键强制关机才可以,遇到这个问题多数是系统的问题了.那么Win10无法关机怎么办?Win10无法关机只能强制关机的解决方法,可能性比较多,可以逐一尝试. 一 ...

  7. html 中的 css 的强制换行与不换行文本

    html 中的 css 的强制换行与不换行文本 1. 强制换行 1. 强制不换行 1. 强制换行 text_wrap {white-space: pre-wrap;word-break: break- ...

  8. html使用div显示会错位,DIV+CSS网页错位诊断和解决方法

    你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断 随着WEB2.0标准化设计理念的普及,国内很 ...

  9. CSS英文单词强制换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有 ...

最新文章

  1. 图像处理之基于阈值模糊
  2. pythonweb框架Flask学习笔记05-简单登陆
  3. php和mysql web开发 笔记_PHP和MySQL Web开发读书笔记---创建Web数据库
  4. Linux下 -bash: php: command not found 命令找不到
  5. 流程图怎么切换_PPT中「较长的流程图」该如何清晰展现?
  6. iOS设计模式——委托(delegate)
  7. 使用Hystrix守护应用(1)
  8. IOS 公共类-数字处理
  9. docker php amqp 扩展,docker搭建rabbitmq,配合php-amqplib+supervisor使用(下)
  10. windows 子系统认识(1)
  11. 管理感悟:不要告诉主管只有一条路
  12. java虚拟机有什么作用_java虚拟机有什么用
  13. 线程创建常用的四种方式
  14. RCD钳位电路--选管
  15. 【周志华机器学习】线性模型
  16. Bagging和Boosting(偏差与方差)
  17. Android 内存被异常回收后直接重启APP
  18. Liunx 创建隐藏文件夹
  19. 《深入理解计算机系统》练习解析(持续更新)
  20. 电商API店铺订单接口(代码对接教程)

热门文章

  1. 【day8】【洛谷算法题】-P3954成绩-刷题反思集[入门1顺序结构][附一周思考总结]
  2. openFOAM动量方程中张量的处理
  3. DUTOJ-1003: Zeratul的军训游戏
  4. 卧槽!终于知道涛哥我为啥赚不到钱了
  5. 刘金琨智能控制(第2版)仿真实例代码整理
  6. 聚类(2)——层次聚类 Hierarchical Clustering
  7. 使用计算机生成景物图像,使用计算机生成假想景物的图像,其主要步骤是______。...
  8. 能ping通IP地址,ping不通主机名问题解决
  9. 移植iic--24c02和fdc2214
  10. 乌班图的世界——建立文件夹和空文件