强制不换行:div{ white-space:nowrap; }

自动换行: div{ word-wrap:break-word; word-break:normal; }

强制不换行

white-space : normal | pre | nowrap | pre-wrap | pre-line | inherit

normal ; 默认。空白会被浏览器忽略。

pre :  空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap :  文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap:保留空白符序列,但是正常地进行换行。

pre-line:合并空白符序列,但是保留换行符。

inherit:规定应该从父元素继承 white-space 属性的值。

设置强行换行
word-break : normal | break-all | keep-all

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

CSS实现文字换行的更多相关文章

  1. css控制文字换行

    1.word-wrap 设置为break-word时,文本中的长单词或url可以换行 <p style="width:100px;word-wrap:break-word;border ...

  2. css 段落文字换行问题

    项目中遇到的一个小问题,以前没有注意到: 超链接超出父级元素,想着给a标签加宽度但是没有效果... 后来发现两个很好用的css属性 1.word-wrap 用来控制换行 取值: (1)normal  ...

  3. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的

    想让文字换行必须要写的那几个css样式就略过了.当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,这时候加个word-wrap:break-word:就基本可以解决但是有种情况是它解决不了的 ...

  5. css 文字换行控制

    强制不换行 white-space:nowrap 强制不换行,并显示省略号 word-wrap: normal; text-overflow: ellipsis; white-space: nowra ...

  6. 【CSS】【1】让DIV中的文字换行显示

    <div style="white-space:normal;word-break:break-all;word-wrap:break-word;">data</ ...

  7. CSS文字换行详细解说

    本文列举了兼容 IE 和 FF 地换行 CSS 推荐样式,详细介绍了word-wrap同word-break地区别.兼容 IE 和 FF 地换行 CSS 推荐样式: 最好地方式是 word-wrap: ...

  8. CSS 文字换行与不换行

    1. 强制不换行 p{ white-space:nowrap; } 2. 自动换行 p{ word-wrap: break-word; word-break: normal; } 3. 强制英文单词断 ...

  9. css 文字换行

    换行word-wrap: break-word 新起一行对长单词进行断句word-break:break-all 本行对长单词进行断句 不换行,强制一行white-space:nowrap table ...

随机推荐

  1. java历史概述

    java简介Java是由Sun Microsystems公司于 1995年5月推出的Java面向对象程序设计语言(以下简称Java语言)和Java平台的总称.由James Gosling和同事们共同研 ...

  2. Chrome 浏览器报 filed to load resource:net err cache read failure 错误:

    在IE/FF下没有该错误提示,但在Chrome下命令行出现如下错误信息: Failed to load resource: net::ERR_CACHE_MISS 该问题是Chrome浏览器开发工具的 ...

  3. android堆栈调试--详细

    1.将ndk中的arm-linux-androideabi-addr2line可执行文件的路径加入配置文件~/.bashrc中,例如: export PATH=$PATH:~/dlna/android ...

  4. Pyhton编程(六)之基本数据类型-集合(补充)

    集合(set) 集合其实就是一个无序的,自动去重的数据集合,它主要的作用是用来去重和进行关系测试,集合的定义方法如下: name=set("czp") /name=set({1,2 ...

  5. linux正确的关机方法

    [root@localhost ~]# sync #数据写入磁盘 [root@localhost ~]# shutdown -h 10 #通知用户再过10分钟就关机 [root@localhost ~ ...

  6. Less循环

    Less循环 在Less中,mixin可以调用它自身.通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构.如,使用循环来创建一个网格类: .generate-columns(4 ...

  7. Android Weekly Notes Issue #285

    November 26th, 2017 Android Weekly Issue #285 本周包含好几篇Kotlin的文章,如通过Property Delegate实现SharedPreferenc ...

  8. Python之可变类型与不可变类型

    Python常见的数据类型有:数字 字符串 元组 列表 字典 不可变类型:数字 字符串 元组 可变类型: 列表 字典 a = 100 b = [100] def num1(x): x += x pri ...

  9. html5 实现 文件夹上传

    先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件 ...

  10. 数据库 SQL Server2012安装步骤详解

    这篇文章主要给大家讲解一下数据库SQL Server2012的安装步骤(若有雷同纯属巧合,还望谅解!) 在正式安装之前,我们需要进行两个设置: ① 首先需要关闭Windows防火墙,若不关闭,后续的安 ...