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

<!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. Listview 异步加载图片之优化篇（有图有码有解释）

    在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有b ...

  2. CTO的眼界到底有多宽？

    CTO的眼界到底有多宽?  [CSDN独家报道]在各大企业中,CTO (Chief Technology Officer,首席技术官)有着雄厚的技术实力,掌握着企业核心技术,是软件开发项目中最重要的人 ...

  3. bzoj2004

    反正N<=10^9肯定是矩阵乘法反正p<=10肯定是状压dp首先有一个非常重要的性质是任意连续P个站,必须保证K辆车必须停在其中的一个站我们设f[i,S]表示到第i个站搞定了后,这K辆公交 ...

  4. 一起啃PRML - 1.1 Example: Polynomial Curve Fitting 多项式曲线拟合

    一起啃PRML - 1.1 Example: Polynomial Curve Fitting @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ 前言: ...

  5. UIImagePickerController 如何显示中文界面

    1: 添加中文的 Localizations Project --> Info --> Localizations  添加 "Chinese(Simplified)" ...

  6. 向SharePoint页面添加后台代码

    转:http://www.cnblogs.com/chenzehe/archive/2009/12/25/1631863.html 在本文中,我将跟大家一起讨论,为MOSS的页面添加服务器端代码的另一 ...

  7. CodeViz产生函数调用图

    一.安装过程   1.CodeViz的安装 0).确认你已经安装Graphviz[ http://www.graphviz.org/] 1).下载CodeViz.[ http://www.csn.ul ...

  8. Delta-wave

    Delta-wave Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. Java for selenium(webdriver) 环境搭建

    开发环境 1. jdk1.7 2. Eclipse 3. selenium(selenium-java-2.42.2.zip) 将下载下来的 selenium-java-2.42.2.zip 解压, ...

  10. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...