有时候一个又臭又长的单词出现在一个并不宽到足以容纳这个单词时会出现内容溢出容器这种情况：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{

        background: skyblue;

    }

    div{

        width: 150px;

        background: #ccc;

    }

    </style>

</head>

<body>

    <div>

        this is a long worddddddddddddddddddddddddddddddddddddddddddddd.

    </div>

</body>

</html>

我们在代码里加入一行代码：word-wrap:break-word;

div{

        width: 150px;

        background: #ccc;

        word-wrap:break-word;

    }

我们会发现那个长长的单词被断开使其不溢出容器。

这就是word-wrap:break-word的作用，首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；我们会发现long单词后面还有一些浪费的空间，这是你如果不想浪费这些空间，word-break:break-all;就发挥作用了；我们修改一下div的CSS：

div{

        width: 150px;

        background: #ccc;

        word-break: break-all;

    }

word-break:break-all;则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

小结：word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

word-wrap: normal | break-word;

word-break: normal | keep-all(不允许断开) | break-all;

更加详细的分析请看：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

每天学习一点点--word-break和word-wrap用法和区别的更多相关文章

  1. word break和word wrap

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

  2. 【Word Break II】cpp

    题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where e ...

  3. 【LeetCode】139. Word Break 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  4. [LeetCode] Word Break II 拆分词句之二

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  5. 【leetcode】Word Break II

    Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a senten ...

  6. 17. Word Break && Word Break II

    Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...

  7. LeetCode:Word Break II（DP）

    题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...

  8. LeetCode Word Break II

    原题链接在这里:https://leetcode.com/problems/word-break-ii/ 题目: Given a string s and a dictionary of words  ...

  9. 【LeetCode OJ】Word Break II

    Problem link: http://oj.leetcode.com/problems/word-break-ii/ This problem is some extension of the w ...

  10. Leetcode#139 Word Break

    原题地址 与Word Break II(参见这篇文章)相比,只需要判断是否可行,不需要构造解,简单一些. 依然是动态规划. 代码: bool wordBreak(string s, unordered ...

随机推荐

  1. loadrunner获取当前CST时间

    第一种方法:使用LR的参数化功能. 代码如下,nowtime是保存当前CST时间的字符串变量,local_time是要参数化的变量. Action() { char *nowtime; nowtime ...

  2. oracle当前的连接数

    怎样查看oracle当前的连接数呢?只需要用下面的SQL语句查询一下就可以了. select * from v$session where username is not null select us ...

  3. android intent和intent action大全

    1.Intent的用法:(1)用Action跳转1,使用Action跳转,如果有一个程序的AndroidManifest.xml中的某一个 Activity的IntentFilter段中 定义了包含了 ...

  4. Minimum Depth of Binary Tree [LeetCode]

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  5. Socket通讯

    复习贴,资料大多来自百科.看了一遍理解了一遍,把绕口的话按语义给改了`_>` 对于一个网络连接来说,套接字是平等的,并没有差别,不因为在服务器端或在客户端而产生不同级别.不管是Socket还是S ...

  6. tab切换-淘宝案例

    案例: html: <body> <div class="wrap" id="wrap"> <div class="no ...

  7. MVC5+EF6 入门完整教程八

    本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时,已经介绍过一种更新数据库的方式: EF比较model和database,如果两边不一致,程序将会drop and ...

  8. JQuery的ajaxFileUpload图片上传初试

    本案例主要说讲使用ajaxFileUpload实现图片的异步上传. 1.html代码部分 这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxF ...

  9. cacti web页面访问 settings出错

    查看apache错误日志: 错误信息Mon Dec 26 11:00:48.241653 2016] [:error] [pid 32607] [client 192.168.10.79:65009] ...

  10. 【代码】二进制转BCD [转]

    BCD:Binary Coded Decimal 即用4位二进制编码表示1位的十进制数.   定义:BCD码这种编码形式利用了四个位元来储存一个十进制的数码,使二进制和十进制之间的转换得以快捷的进行. ...