css3中允许单词内断句word-wrap和怎么处理断句word-break
首先说一下:浏览器的默认行为,在一行中几个单词 排列着,如果最后一个长单词 太长时 首先是移到下一行,如果该单词的长度大于父元素的宽度,会溢出。
<!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的更多相关文章
- 43.Word Break(看字符串是否由词典中的单词组成)
Level: Medium 题目描述: Given a non-empty string s and a dictionary wordDict containing a list of non- ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- [LeetCode] Reverse Words in a String 翻转字符串中的单词
Given an input string, reverse the string word by word. For example, Given s = "the sky is blue ...
- CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...
- C++实现对文件中各单词词频的统计及其代码优化
先给出github上的代码链接以及项目需求 1.项目概述 这个项目的需求可以概括为:对记事本(txt)文件进行单词的词频统计和排序,排序结果以指定格式输出到默认文件中,并要求能够快速地完成整个统计和结 ...
- CSS3中很容易混淆的transform,translate,transition。如何去区分,以及综合写法。
属性 含义 transition(过渡) 用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同 transform(变形) 用于元素进行旋转.缩放.移动或倾斜,和设 ...
- CSS3中的新特性
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
随机推荐
- Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...
- [译]GotW #1: Variable Initialization
原文地址:http://herbsutter.com/2013/05/09/gotw-1-solution/ 第一个问题强调的是要明白自己在写什么的重要性.下面有几行简单的代码--它们大多数之间都有区 ...
- xmanager远程登录
- BZOJ1935: [Shoi2007]Tree 园丁的烦恼
1935: [Shoi2007]Tree 园丁的烦恼 Time Limit: 15 Sec Memory Limit: 357 MBSubmit: 552 Solved: 220[Submit][ ...
- 为web服务器设置HttpOnly防范XSS攻击
HttpOnly标识是一个可选的.避免利用XSS(Cross-Site Scripting)来获取session cookie的标识.XSS攻击最常见一个的目标是通过获取的session cookie ...
- 使用Eclipse构建GeoTools项目
转自:http://hi.baidu.com/liushuigs/item/a62969e6667f9815585dd8b1 由于GeoTools是原本是使用Maven构建的,所以,不能直接将工程导入 ...
- 常用SQL语句(增删查改、合并统计、模糊搜索)
转自:http://www.cnblogs.com/ljianhui/archive/2012/08/13/2695906.html 常用SQL语句 首行当然是最基本的增删查改啦,其中最重要的是查. ...
- 使用Hexo搭建github博客步骤,超简便
categories: 工具 tags: git Windows 搭建博客 你只需要node环境和一个github账号就可以开工啦! 本教程适合于Windows环境,Mac教程也大同小异 利用hexo ...
- HDOJ/HDU 2352 Verdis Quo(罗马数字与10进制数的转换)
Problem Description The Romans used letters from their Latin alphabet to represent each of the seven ...
- oracle查看表锁及解锁
--kill session语句 1 alter system kill SESSION '2171,60490'; --以下几个为相关表 1 2 3 4 5 6 7 SELECT * FROM v$ ...