首先说一下：浏览器的默认行为，在一行中几个单词 排列着，如果最后一个长单词 太长时 首先是移到下一行，如果该单词的长度大于父元素的宽度，会溢出。

<!doctype html>

<html>

<head>

</head>

<body>

<div style="width:100px;border:1px solid #ccc;">hello world! this is  a  aaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

</html>

1、word-wrap:break-word

w3school手册中这样解释的：允许长单词或 URL 地址换行到下一行，也就是说当一个单词的长度超出它所在的区域时 浏览器会将多余的字符移到下一行。

这个属性是只指先允许浏览器对长单词进行换行，因为当一个单词长度太长了，浏览器默认先把它移到下一行，然后如果设置了这个属性，长单词会截断

<div style="width:100px;border:1px solid #ccc;word-wrap: break-word;">hello world! this is  a  aaaaaaaaaaaaaaaaaaaaaaaaa</div>

2、word-break:break-all  属性规定自动换行的处理方法，在哪个位置进行截断

是指对于截断的处理方式是任何地方超出区域后都截断，当一行中最后的单词太长了，如果不加这个属性，那么浏览器会默认先把它下移，

设置这个word-break:break-all 属性后，在当前这一行中进行截断处理。

<div style="width:100px;border:1px solid #ccc;word-wrap: break-word;word-break: break-all;">hello world! this is  a  aaaaaaaaaaaaaaaaaaaaaaaaa</div>

css3中允许单词内断句word-wrap和怎么处理断句word-break的更多相关文章

  1. 43.Word Break（看字符串是否由词典中的单词组成）

    Level:   Medium 题目描述: Given a non-empty string s and a dictionary wordDict containing a list of non- ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. [LeetCode] Reverse Words in a String 翻转字符串中的单词

    Given an input string, reverse the string word by word. For example, Given s = "the sky is blue ...

  4. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  5. C++实现对文件中各单词词频的统计及其代码优化

    先给出github上的代码链接以及项目需求 1.项目概述 这个项目的需求可以概括为:对记事本(txt)文件进行单词的词频统计和排序,排序结果以指定格式输出到默认文件中,并要求能够快速地完成整个统计和结 ...

  6. CSS3中很容易混淆的transform,translate,transition。如何去区分，以及综合写法。

    属性 含义     transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 transform(变形) 用于元素进行旋转.缩放.移动或倾斜,和设 ...

  7. CSS3中的新特性

    一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...

  8. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  9. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

随机推荐

  1. bzoj2434

    利用了bzoj3172提到的性质,x串在y串中的出现的次数即为在fail树上以x结尾节点为根的子树中有多少个节点在y串上所以很明显我们要离线解决,我们先把询问按y分类存起来然后我们顺着操作顺序来,出现 ...

  2. HDU 5935 Car 【模拟】 （2016年中国大学生程序设计竞赛（杭州））

    Car Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  3. nyoj 经典的连续字串和

    import java.util.Scanner; public class 字串和 { public static void main(String[] args) { // TODO Auto-g ...

  4. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6

    操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含 ...

  5. Tyvj P1463 智商问题 分块

    P1463 智商问题 时间: 1500ms / 空间: 131072KiB / Java类名: Main 背景 各种数据结构帝~各种小姊妹帝~各种一遍AC帝~ 来吧! 描述 某个同学又有很多小姊妹了他 ...

  6. Java中url传递中文参数取值乱码的解决方法

    java中URL参数中有中文值,传到服务端,在用request.getParameter()方法,得到的常常会是乱码,这将涉及到字符解码操作. 方法一: http://xxx.do?ptname=’我 ...

  7. books

    <<learning opencv>>,   布拉德斯基 (Bradski.G.) (作者), 克勒 (Kaehler.A.) (作者),   这本书一定要第二版的,因为第二版 ...

  8. dell vfoglight

    vFoglight针对RH/Vmware/Hyper-v/Vsphere环境的相关软件包下载链接 https://software.dell.com/register/getfile/?param=2 ...

  9. javascript函数定义表达式和函数声明的区别

    在javascript中,函数有两种定义写法,函数定义表达式和函数声明,其例子分别如下所示: var test = function(x){ return x; } function test(x){ ...

  10. poj 1193 内存分配

    好麻烦的模拟题,一次性过了就好!!!不过用了两天哦.. 小伙伴们慢慢做哦. #include <iostream> #include <list> #include <q ...