做项目改bug的时候,遇到过好多次,要么是文本超出文本区域,或者单词太长(一般是url链接中的一些鬼),把装它的标签强制撑大,导致一些响应式问题。除此之外,还有很多问题,每次都是恍然醒悟,然后又在网上查看,过几天又开始淡忘。人老了,得承认,记性不好,笔记就应该起到重要性作用,对,就是这样的。

1.首先,我们先来看浏览器默认情况下出现的bug:

 .div0, .div1, .div2 {
width: 200px;
height: 50px;
background-color: #00CCFF;
margin-top: 20px;
}
 <h3>浏览器默认情况</h3>
<div class="div0">
<p>this is just a testttttttttttttttttttttttttttttttttttttttttttttttttt!</p>
</div>

结果:

浏览器默认情况下,如果有一个单词很长,导致一行剩下的空间放不下,则浏览器会把这个单词挪到下一行去。但是如果新行还是放不下,则会溢出父元素。呵呵呵,这样是不是很丑呀,如果在响应式下面,你就会发现,在moile端老是出现横向滚动条,找呀找呀,最终是这个家伙搞的鬼!

2.word-wrap: break-word;

.div1 { word-wrap: break-word; }

 <h3>word-wrap: break-word; </h3>
<div class="div1">
<p>this is just a testttttttttttttttttttttttttttttttttttttttttttttttttt!</p>
</div>

结果:

word-wrap: break-word; 比较温柔,会先另起一行,新的行放不到再把单词断了。

3.word-break: break-all;

.div2 { word-break: break-all;  }

 <h3>word-break: break-all;</h3>
<div class="div2">
<p>this is just a testttttttttttttttttttttttttttttttttttttttttttttttttt!</p>
</div>

结果:

word-break: break-all; 这娃比较暴力,他不会去新起一行,而是直接在后面跟着,如果放不下,则会强制把单词折断。

这里把它整理记录下来,希望以后遇到了,可以自己查看,哈哈哈哈哈。。。

word-wrap: break-word 和 word-break: break-all 到底有啥区别?的更多相关文章

  1. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  2. leetcode 139. Word Break 、140. Word Break II

    139. Word Break 字符串能否通过划分成词典中的一个或多个单词. 使用动态规划,dp[i]表示当前以第i个位置(在字符串中实际上是i-1)结尾的字符串能否划分成词典中的单词. j表示的是以 ...

  3. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  4. leetcode 290. Word Pattern 、lintcode 829. Word Pattern II

    290. Word Pattern istringstream 是将字符串变成字符串迭代器一样,将字符串流在依次拿出,比较好的是,它不会将空格作为流,这样就实现了字符串的空格切割. C++引入了ost ...

  5. C#操作word的一些基本方法(word打印,插入文件,插入图片,定位页眉页脚,去掉横线)

    Microsoft.Office.Interop.Word.Application wordApp = new ApplicationClass() word对象 2. Microsoft.Offic ...

  6. c#读取word内容,c#提取word内容

    Post by 54admin, 2009-5-8, Views:575 1: 对项目添加引用,Microsoft Word 11.0 Object Library 2: 在程序中添加 using W ...

  7. Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容,读取一段话中相同样式内容,理解Document中run

    from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...

  8. SpringBoot集成文件 - 如何基于POI-tl和word模板导出庞大的Word文件?

    前文我们介绍了通过Apache POI通过来导出word的例子:那如果是word模板方式,有没有开源库通过模板方式导出word呢?poi-tl是一个基于Apache POI的Word模板引擎,也是一个 ...

  9. 139. Word Break 以及 140.Word Break II

    139. Word Break Given a non-empty string s and a dictionary wordDict containing a list of non-empty  ...

  10. Sublime Text 2 自动开启换行 Word Wrap

    首先当然要夸一下神器 Sublime Text 2,自从第一次用我就彻底把神马 Notepad++ 和 TextMate 打入冷宫,用来开发 WEB 项目从此 IDE 都不需要了! 下面讲讲如何自动开 ...

随机推荐

  1. 《UNIX网络编程》之点对点通信

    思路: 点对点通信,其原理也比较简单,在前面回显服务器的基础上,我们分别在服务端和客户端都使用两个线程,一个线程负责发送数据包,一个线程负责接收数据包. 代码如下: 客户端: /*********** ...

  2. linux sudo环境变量设置

    这是第一次在博客园中写自己的随笔,也是第一次使用Markdown的编辑环境,值得纪念一下!希望在以后学习linux的道路上能多多记录自己的学习心得和遇到问题的解决方法,朝着运维的方向迈出坚实的脚步. ...

  3. 在MacOs上配置Hadoop和Spark环境

    在MacOs上配置hadoop和spark环境 Setting up Hadoop with Spark on MacOs Instructions 准备环境 如果没有brew,先google怎样安装 ...

  4. linux FILE 类型.

    stdio.h 头文件中,有以下内容(用内部行号解释): /* The opaque type of streams. This is the definition used elsewhere. * ...

  5. 解压版mysql安装--windows系统

    1 解压到某个目录 2 配置配置文件 3 执行命令:安装目录/bin/mysqld --install mysql5.6 --defaults-file=指定配置文件位置 "安装目录/bin ...

  6. PHP Libxml

    PHP Libxml 函数 PHP:指示支持该函数的最早的 PHP 版本. 函数 描述 PHP libxml_clear_errors() 清空 Libxml 错误缓冲. 5 libxml_get_e ...

  7. pydev出现Project interpreter not specified(eclipse+pydev)

    出现上述错误的原因是因为没有为Pydev指定python.exe位置 修改步骤依次是 1.从Eclipse的菜单 Window --> Preferences 打开首选项配置:       2. ...

  8. Qt5-控件-QRadioButton-单选按钮-用于从多个选项中选取一个-单选神器

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QRadioButton> ...

  9. hdu1233(最小生成树)

    Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能 ...

  10. ruby on rails 中render的使用

    最近写ror,因为比较菜,很多东西不知道,只能看一点查一点了 render 先上点搜集的常用方式 render :action => "long_goal", :layout ...