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、white-space和word break的区别

之前写过其中的两个,今天补充一下. 1、word-wrap:break-word; 内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:bl...

CSS white-space normal nowrap强制同一行内显示所有文本不换行

1.多用于标题的字数很多 ,但不想换行 为了隐藏超出的部分 就用overflow:hidden样式。 1、white-space语法: white-space : normal nowrap 2、...

CSS样式中P标签的内容换行属性white-space

需求描述:在一个div块中包含四个div块,这四个div块每个块都有自己的子元素p标签,这个四个div的宽度是由百分比控制的问题描述:使用ng-repeat加载一个list集合数据的时候由于某个字段的...

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

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

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...

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

white-space 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 nowrap 文...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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