word-break:【断词】

定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行。

语法:word-break: normal|break-all|keep-all;

默认值 normal
继承性 yes
版本 css3
Javascript语法 object.style.wordBreak="keep-all"
描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

兼容性:

举个栗子:

<span class="text-s">iIanishttp://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour</span>
.text-s {
display: inline-block;
width: 240px;
// word-break: keep-all;
}

未设置word-break:

设置word-break:break-all;

设置word-break:keep-all;或者word-break:normal;

word-wrap:【换行】

定义:允许长单词或 URL 地址换行到下一行。

语法:word-wrap: normal|break-word;

默认值: normal
继承性: yes
版本: CSS3
JavaScript 语法:

object.style.wordWrap="break-word"

 
描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

兼容性:

举个栗子:【和上面一样】

未设置word-wrap:

设置word-wrap:normal;

设置word-wrap:break-word;

对比上述栗子设置word-break:break-all;和word-wrap:break-word的差别

总结:

word-break:当行尾放不下一个单词时,决定单词内部怎么摆放 => 决定句子末尾放不下单词时,单词是否换行

break-all:强行摆放,挤不下剩下的就换下一行显示。

keep-all:放不下,就另外起一行展示;如果还放不下就溢出显示。

word-wrap:当行尾放不下时,决定单词内是否允许换行 => 决定单词内该怎么换行

normal:单词太长,换行显示,在超过一行就溢出显示。

break-word:当单词太长时,先尝试换行;换行后还是太长,单词内还可以换行

附加一个:文字两端对齐

属性:text-align:justify;

兼容性:十分不好

text-align:center;

text-align:justify;

参考博文:http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/

浅析word-break work-wrap区别的更多相关文章

  1. word break和word wrap

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

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

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

  3. 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 ...

  4. 【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 ...

  5. 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 ...

  6. LeetCode:Word Break II(DP)

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

  7. LeetCode Word Break II

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

  8. 【LeetCode OJ】Word Break II

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

  9. Leetcode#139 Word Break

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

  10. 【leetcode】Word Break (middle)

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

随机推荐

  1. New line

    The concepts of line feed (LF) and carriage return (CR) are closely associated, and can be either co ...

  2. 九十分钟极速入门Linux——Linux Guide for Developments 学习笔记

    系统信息:CentOS 64位. 一张图了解命令提示符和命令行 一些实用小命令 mkdir(make directory,创建目录).ls(list,列出当前目录下的内容).rm(remove,删除文 ...

  3. ElasticSearch作为Windows服务启动

           由于公司服务器用的Windows服务器,所以你懂得…… 直接下载elasticsearch中文发行版.下载地址是:https://github.com/medcl/elasticsear ...

  4. opencv 抠图联通块(c接口)

    #include "stdio.h" #include "iostream" #include "opencv/cv.h" #include ...

  5. android adb命令

    adb查看logcat adb logcat <TAG>:* *:S 查看指定TAG的Log adb查看最上层activity:linux: adb shell dumpsys activ ...

  6. solr 日期查询格式

    //solr 日期格式: SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'"); //开始 ...

  7. Android -- 常见控件的小效果

    1,EditText控件 ① 修改光标颜色 自定义drawable 创建cursor.xml文件 <?xml version="1.0" encoding="utf ...

  8. jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

    比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...

  9. Ansible 学习笔记

    最近因为需要管理很多台机器,而这些机器又需要频繁重新安装,实在受不了Puppet需要在每个客户机上都安装一遍,于是转头开始学些Ansible.根据这段时间的使用,这个确实是神器,唯一的感觉就是相见恨晚 ...

  10. JS数组操作示意图(shift,unshift,pop,push)

    shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b: ...