关闭

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

标签: css换行
179人阅读 评论(0) 收藏 举报
分类:

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 : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6410次
    • 积分:138
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论
  • z-index注意点

    qq_29431049: 不错的技术分享,路过学习了,大家如果有谁也想了解类似的技术的,就通过隐形云来找我吧,随时欢迎骚扰