white-space、word-wrap和word-break区别

原创 2016年05月31日 15:38:35

white-space

  • 作用于空格和回车,用于控制空格是否合并、回车是否可折行、句子太长是否在空格处折行
  • 常用取值不同的作用
    • normal: 多个连续的空格会被合并为一个,回车会被忽略,同时句子如果太长,会在空白处折行
    • nowrap: 与normal不同的一点是如果句子长了也不会折行
  • 常用的省略号的实现
.classA {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
  • 如果用了white-space为nowrap,设置其他的强制折行(word-break)是不起作用的,要将white-space设置为normal

word-wrap

  • 作用于单词上,控制超长单词是否折行
  • 常用取值的作用:
    • normal: 单词超长也不可折行,产生溢出
    • break-word: 单词超长会折行

word-break:normal | break-all | keep-all (词内换行)

  • normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
  • break-all : 强行换行,将截断英文单词
  • keep-all : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.

css排版之word-wrap word-break white-space 用法浅析

word-wrap word-break white-space 用法浅析 我们在对文字排版时有时候会需遇到文字比较多的情况,文字比较多时我们还可能会考虑到文字如何展示,今天我们主要说说文字遇到边界...

word-wrap,word-break,white-space,text-overflow的区别和用法

汉字和字符在一起显示时 汉字和字符会出现错行的情况 如图片所示 此篇文章 可以很好的解释这个问题 但目前火狐似乎无效 进一步研究中.........
  • ironlee
  • ironlee
  • 2011年02月23日 18:07
  • 499

word-wrap、word-break、white-space区别

word-wrap、word-break、white-space区别 我们先来看看在w3c中这三个属性分别是怎么解释的。 white-space:规定如何处理元素中的空白。 word-wra...

css中word-break、word-wrap、white-space的区别

这三个属性很容易混淆,一段时间不用,基本上又忘光了。花时间将自己的心得整理一下,供以后查阅word-break定义单词内部的换行规则语法 word-break: normal|break-all|...

word-wrap,word-break,white-space,text-overflow的区别和用法 文字处理方法

word-wrap,word-break,white-space,text-overflow的区别和用法 在div中,文本布局经常出现,换行混乱的情况。 问题表现:1.如果...

word-wrap、white-space和word break的区别

1、word-wrap:break-word; 内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute...
  • kakaxiD
  • kakaxiD
  • 2016年12月29日 10:34
  • 633

css换行(white-space、word-wrap、word-break)

white-space 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 nowrap 文...

CSS中word-wrap、word-break、white-space

一、word-wrap word-wrap:normal(默认)|break-word; 参数 normal:允许内容顶开指定的容器边界。 break-word:内容将在边界内换行,必...
  • whaxrl
  • whaxrl
  • 2014年04月28日 15:19
  • 682

溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space

一、首先依次介绍这几个文字处理的CSS属性 1、word-break:  word-break 属性规定自动换行的处理方法。 当行尾放不下一个单词时,决定单词内部该怎么摆放。  b...

文本换行word-wrap、word-break与white-space

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401670688&idx=1&sn=65514a8b8d7bfeb38...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:white-space、word-wrap和word-break区别
举报原因:
原因补充:

(最多只允许输入30个字)