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则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。
相关推荐
在现代Web开发中,CSS已经发展出许多强大的新特性,其中CSS自定义属性(也称为CSS变量)是其中之一。这个特性允许开发者在CSS中定义变量,以提高代码的可维护性和复用性。Sass mixin虽然在过去是实现类似功能的一个...
3. **使用`removeProperty`方法**:对于原生JavaScript,可以使用`element.style.removeProperty(property)`来移除指定的CSS属性。这种方法更加彻底,因为它不仅移除了由JavaScript设置的样式,还允许浏览器的默认...
然而,IE(Internet Explorer)浏览器,特别是早期版本,对CSS3的支持并不完全,这使得开发者在构建跨浏览器兼容的网站时面临挑战。"ie兼容Css3属性"这一主题主要关注如何使IE浏览器支持那些原本不被其完全支持的CSS...
这本书主要探讨了CSS(层叠样式表)的核心概念,包括各种属性的使用、浏览器之间的兼容性问题以及如何利用CSS进行高效网页布局。 1. **CSS属性**:CSS属性是控制网页元素外观和布局的关键部分。书中详细介绍了如...
在IT领域,特别是前端开发中,使用jQuery和CSS3来创建交互式的日历表是一种常见的实践。这个项目标题“jquery css3属性制作超酷的日历表点击按钮日历表切换”涉及到了两个核心技术:jQuery库和CSS3样式,用于实现一...
【CSS3属性详解】 CSS3(Cascading Style Sheets Level 3)是CSS规范的第三版,它引入了许多新特性,极大地丰富了网页设计。以下是一些关键的CSS3属性的详细说明: 1. **border-radius**: 这个属性允许你创建圆角...
**CSS Clip** 属性是一种非常实用且灵活的方法,可以用来隐藏元素的部分内容。它的工作原理类似于在页面上放置了一个“面具”,允许我们通过定义一个矩形区域来裁剪元素的显示部分。 **基本用法**: - 首先,需要将...
此外,压缩可能包括去除空格、注释和不必要的属性,以及使用CSS minifier来压缩CSS代码。 在实际开发中,了解SVG和CSS之间的转换技巧对于优化Web应用的性能和用户体验至关重要。开发者应该熟悉如何在两者之间灵活...
CSS手册、帮助字典和帮手是学习和快速查找CSS属性、选择器及规则的重要工具,特别是在网络连接不便时,离线资源显得尤为实用。 本“CSS手册 CSS帮助字典 CSS帮手”提供的正是这样一个资源,它包含了CSS 2.0的详细...
在本文中,我们将详细介绍line-height属性的五种不同用法,包括如何在CSS中设置行高,以及line-height的继承性与计算方式。 首先,line-height属性可以被定义为normal,这是浏览器的默认值,通常情况下,这个默认值...
书中包含了许多实用的技巧和实验性的技术,比如CSS变量、自定义属性、Flexbox和Grid布局系统,以及CSS动画和过渡的高级用法。这本书特别强调解决问题的创新方法,激发开发者在设计中发挥创造力。 通过学习这三本书...
本主题聚焦于如何使用CSS3的样式属性来创建各种图形图标,这是一种高效且灵活的方法,无需依赖图像编辑软件或SVG等矢量图形格式。通过熟练掌握CSS3的特性,开发者可以创建出响应式、高性能且易于维护的图标。 首先...
Repaintless.css是一款专为优化CSS3动画...总体来说,Repaintless.css是一个针对性能优化的CSS3动画库,特别适合那些对页面流畅度有高要求的项目。通过合理利用其特性,开发者可以创建出既美观又高效的Web动画效果。
在网页设计中,jQuery 和 CSS3 的结合使用可以创造出丰富的动态效果,特别是在页面切换时的动画效果。本主题主要探讨如何利用jQuery与CSS3的animation属性实现多页面间的平滑过渡,为用户提供更加吸引人的浏览体验。...
在网页设计领域,CSS(Cascading Style Sheets)与HTML的结合使用,特别是CSS+Div布局,已经成为构建现代网页的标准方法。本篇将深入探讨CSS+Div布局的概念、CSS教程的重要性以及CSS API的相关知识。 首先,CSS+Div...
对定位属性值进行详解,和常见用法的分享。在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一...
《CSS参考》是一份详尽的CSS属性和属性...开发者可以根据需要快速查找和了解特定CSS属性的详细信息,包括其用法、以及它们各自在CSS不同版本中的定义和更新。这对于任何从事Web开发的人员来说,是一份宝贵的参考资料。
4. **Flex布局**:CSS3引入的弹性盒布局(Flexbox)让多子元素的容器能灵活调整元素的排列顺序和大小,特别适合复杂的一维布局。 5. **Grid布局**:网格布局(Grid)则是CSS3的另一大利器,适用于二维布局,可以...