css--换行相关的几个属性white-space word-wrap word-break

今天遇到一个问题，把table里面的内容全部换成这行的，在td里添加属性word-break:break-all即可。

对比几个换行相关的属性，做下总结：

white-space : normal 自然显示，也就是文本碰到容器壁之后自动换行

white-space : nowrap 强制文本在同一行，除非遇到</br>

word-wrap : break-word

自然显示下长单词会挪到下一行就显示，并且，如果单词长过容器宽度就会伸出去。word-wrap : break-word的作用就是长单词依然会挪到下一行显示，但是不会让它超过容器宽度而是让它碰壁之后折行。

word-break : break-all

它的神奇作用在于，长单词不会挪到下一行显示了，依旧和短单词一样一次排列显示，在这个基础上碰到容器壁之后再折行。

感谢http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html的详细讲解！

时间： 2024-08-24 16:13:03

css--换行相关的几个属性white-space word-wrap word-break的相关文章

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

用CSS border相关属性画三角形

效果 HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Triangle Demo</title> <link rel="stylesheet" href="triangle.css"> </head> <body&g

CSS换行2

1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图换行说明图无间隔小换行样式-br使用 2.可以使用<p.>标签来实现大换行.如果在一个文章里需要分段换行形式,可以使用<p>标签来实现换行,但是需要注意的是p标签的用法. 大换行有间隔样式 3.可以使用CSS设置宽度自动换行.我们可以在一个div里,添加一个div并加入css样式,对加入的div设置对

【原】谈谈css中关于元素定位的属性（positon&z-index）

position position主要是4种设定: static(默认)如果不设置,默认就是staitc元素.其实就是没有position设定,DOM流安排在哪里就是哪里.所有的相关于位置的设定均无效,意味着left, right, z-index等属性设置了也是白设. relative如果只是设置postion: relative; 和static并没有视觉上的区别,但是,一旦设定了,就指定了对应DOM元素"被定位"了,之后就可以设置一些诸如right,left之类的属性. abso

css样式表中四种属性选择器

css样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new"> 2>精确属性值 a[href="http://www.cnblogs.cn"][title="textTitle"]{fon

CSS 换行知多少: word-wrap && word-break && white-space && word-spacing

word-wrap : 首先提一下,word-wrap 这个 CSS 属性在CSS3中已经被更名为 overflow-wrap,这样语义化也是为了避免与 word-break 混淆: Reference: The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwis

CSS换行：word-wrap、word-break和text-wrap区别

一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持默认处理). 2.word-wrap: break-word:在长单词或 URL 地址内部进行换行.(即在容器末端有长单词不能完全显示,不会截断单词,而是作为整体,自动换行) 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <h

agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s