1.换行
word-wrap:
css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
word-break:
css的 word-break 属性用来标明怎么样进行单词内的断句。
word-wrap(两个属性值,要么运行换行,要么不允许换行)
normal | 只在允许的断字点换行(浏览器保持默认处理,即采取浏览器默认行为)。 |
break-word | 在长单词或 URL 地址内部进行换行。 |
word-break(采取什么方式换行)
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行。 |
keep-all | 只能在半角空格或连字符处换行。 |
ps:
网上有些文章说,word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。
相关推荐
对定位属性值进行详解,和常见用法的分享。在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一...
需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性,本文重点介绍Transform的使用方法,具体内容如下 浏览器支持情况: Internet Explorer 10、Firefox、...
对定位属性值进行详解,和常见用法的分享。在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一...
7.1.2 常用CSS hack使用方法 7.1.3 CSS hack管理 7.2 IE条件注释功能 7.3 盒模型问题 7.3.1 盒模型hack 7.3.2 简单盒模型hack方法 7.4 IE捉迷藏 7.5 ul的不同表现 7.6 IE 3px问题 7.7 高度不适应 7.8 IE6断头台问题 ...
在很多是时候往往要打印网页中的某一部分,而不是全部网页,所以告诉打印机要打印的部分,使用css进行...以上两行代码是引入外部css样式表,需要特别主义的是media属性值分别是screen和print,用来规定css样式表要服
基于浏览器的特性检测大家应该已经很熟悉了,特别是...但是@supports并不能完全替代JS的特性检测方法,它只支持对CSS属性的检测,其它HTML5 api以及webP等技术的检测还是需要JS来完成。用法: @supports就像media
它对于在支持 CSS 转换但不支持 CSS 转换(例如 IE9)的浏览器上为 CSS 转换属性设置动画特别有用。 它可以处理任何单值 2D/3D CSS 转换函数(IE9 不支持 3D 转换),即: 2D 变换: translateX 、 translateY 、 ...
来设置居中效果时,除去博客下介绍的css3方法外,还可以使用负的margin来居中,这样解决了兼容性的问题,但是只适用于宽高已知的情况(因为负的偏移量为元素宽高的一半)。宽高改变时,不再是居中效果。 在这些布局...
它不依赖JavaScript,而是使用aria-label / data - Attribute *,伪元素, content属性和CSS3过渡来创建工具提示。 它还使用BEM命名约定,特别是针对修饰符。 开始使用 使用以下方法之一获取库: 的GitHub 完整版...
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器...
而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器就可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页
响应式链接特效,鼠标放在上面,立方体就会旋转,同时链接是旋转显示出来,可上下旋转,也可左右旋转,两个都是这样的,我们可以学习用HTML5 css3技术生成立方体特效,另外是一些CSS3中动画属性元素的使用方法,...
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路。此贴为更新帖,以后...
使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。 ...
各种浏览器之间的竞争的白热化意味着越来越多...它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。 要想使用这个功能,你需要用到三种元素:一个:befor
许多UI Style Lang属性与普通CSS3属性(不是简写)相同。 这提供了一种熟悉的语法,特别是对于那些有CSS3经验的人。 如果您正在寻找一种简便的方法来: 在wxPython中绘制形状,文本和/或图像,而不必担心ID,画笔,...
CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须...
单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现...
最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候。最近...