word-wrap: break-word 和 word-break: break-all 到底有啥区别?
做项目改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 到底有啥区别?的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- leetcode 139. Word Break 、140. Word Break II
139. Word Break 字符串能否通过划分成词典中的一个或多个单词. 使用动态规划,dp[i]表示当前以第i个位置(在字符串中实际上是i-1)结尾的字符串能否划分成词典中的单词. j表示的是以 ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- leetcode 290. Word Pattern 、lintcode 829. Word Pattern II
290. Word Pattern istringstream 是将字符串变成字符串迭代器一样,将字符串流在依次拿出,比较好的是,它不会将空格作为流,这样就实现了字符串的空格切割. C++引入了ost ...
- C#操作word的一些基本方法(word打印,插入文件,插入图片,定位页眉页脚,去掉横线)
Microsoft.Office.Interop.Word.Application wordApp = new ApplicationClass() word对象 2. Microsoft.Offic ...
- c#读取word内容,c#提取word内容
Post by 54admin, 2009-5-8, Views:575 1: 对项目添加引用,Microsoft Word 11.0 Object Library 2: 在程序中添加 using W ...
- Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容,读取一段话中相同样式内容,理解Document中run
from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...
- SpringBoot集成文件 - 如何基于POI-tl和word模板导出庞大的Word文件?
前文我们介绍了通过Apache POI通过来导出word的例子:那如果是word模板方式,有没有开源库通过模板方式导出word呢?poi-tl是一个基于Apache POI的Word模板引擎,也是一个 ...
- 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 ...
- Sublime Text 2 自动开启换行 Word Wrap
首先当然要夸一下神器 Sublime Text 2,自从第一次用我就彻底把神马 Notepad++ 和 TextMate 打入冷宫,用来开发 WEB 项目从此 IDE 都不需要了! 下面讲讲如何自动开 ...
随机推荐
- 《UNIX网络编程》之点对点通信
思路: 点对点通信,其原理也比较简单,在前面回显服务器的基础上,我们分别在服务端和客户端都使用两个线程,一个线程负责发送数据包,一个线程负责接收数据包. 代码如下: 客户端: /*********** ...
- linux sudo环境变量设置
这是第一次在博客园中写自己的随笔,也是第一次使用Markdown的编辑环境,值得纪念一下!希望在以后学习linux的道路上能多多记录自己的学习心得和遇到问题的解决方法,朝着运维的方向迈出坚实的脚步. ...
- 在MacOs上配置Hadoop和Spark环境
在MacOs上配置hadoop和spark环境 Setting up Hadoop with Spark on MacOs Instructions 准备环境 如果没有brew,先google怎样安装 ...
- linux FILE 类型.
stdio.h 头文件中,有以下内容(用内部行号解释): /* The opaque type of streams. This is the definition used elsewhere. * ...
- 解压版mysql安装--windows系统
1 解压到某个目录 2 配置配置文件 3 执行命令:安装目录/bin/mysqld --install mysql5.6 --defaults-file=指定配置文件位置 "安装目录/bin ...
- PHP Libxml
PHP Libxml 函数 PHP:指示支持该函数的最早的 PHP 版本. 函数 描述 PHP libxml_clear_errors() 清空 Libxml 错误缓冲. 5 libxml_get_e ...
- pydev出现Project interpreter not specified(eclipse+pydev)
出现上述错误的原因是因为没有为Pydev指定python.exe位置 修改步骤依次是 1.从Eclipse的菜单 Window --> Preferences 打开首选项配置: 2. ...
- Qt5-控件-QRadioButton-单选按钮-用于从多个选项中选取一个-单选神器
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QRadioButton> ...
- hdu1233(最小生成树)
Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能 ...
- ruby on rails 中render的使用
最近写ror,因为比较菜,很多东西不知道,只能看一点查一点了 render 先上点搜集的常用方式 render :action => "long_goal", :layout ...