CSS中控制不换行属性

简介: 强制不换行属性 white-space:nowrap;   word-break:break-all;只对英文起作用,以字母作为换行依据   word-wrap:break-word; 只对英文起作用,以单词作为换行依据   white-space:pre-wrap; 只对中文起作用,强制换行   white-space:nowrap; 强制不换行,都起作用   whi
强制不换行属性
  1. white-space:nowrap;   
  2. word-break:break-all;只对英文起作用,以字母作为换行依据   
  3. word-wrap:break-word; 只对英文起作用,以单词作为换行依据   
  4. white-space:pre-wrap; 只对中文起作用,强制换行   
  5. white-space:nowrap; 强制不换行,都起作用   
  6. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现  

注意,一定要指定容器的宽度,不然的话是没有用的。

注意word-break 是IE5+专有属性

  1. word-break : normal | break-all | keep-all  

参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。

 

目录
相关文章
|
20天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
10天前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
23 0
|
10天前
|
前端开发
CSS属性
CSS属性
24 0
|
12天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
13 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
32 4
CSS常用滤镜属性讲解
|
2月前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
36 2
了解 css中 backface-visibility 属性
|
14天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
14 0
|
2月前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
2月前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
36 1
|
2月前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!