Fork me on GitHub

文字，英文溢出的处理方法

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 574 字 | 阅读时长 ≈ 2 分钟

前言

平时做后台系统表格的时候总会遇到2种情况，一是表格中文字过长需要换行，也有客户希望表格高度一致，文字溢出隐藏显示…的要求。以往都是随便百度一下就写了。但是最近在做国际化的时候英文单词换行会出现单词被截断情况。借此我重新翻阅了下文档。本篇文章就介绍一下文字溢出的处理的方法和相关css属性。

相关属性

对于non-CJK (non-CJK 指非中文/日文/韩文) 文本。这里以英文举例

word-break

  1. word-break: normal;
  2. word-break: break-all;
  3. word-break: keep-all;
  4. word-break: break-word;
  1. normal和keep-all：队尾放不下一个单词的时候，只能在半角空格或连字符处换行。否则超出的部分溢出显示。
  2. break-all：队尾放不下一个单词的时候，先用单词前面的字母挤满这一行，多余的字母换行显示。
  3. break-word：队尾放不下一个单词的时候，可以在半角空格或连字符处换行，没有半角空格或连字符处和break-all的规则保持一致。

word-wrap

  1. word-wrap: normal;
  2. word-wrap: break-word;

    对于non-CJK (non-CJK 指非中文/日文/韩文) 文本。这里以英文举例

  3. normal：队尾放不下一个单词的时候，只能在半角空格或连字符处换行。否则超出的部分溢出显示。
  4. break-word：队尾放不下一个单词的时候，可以在半角空格或连字符处换行，没有半角空格或连字符处先用单词前面的字母挤满这一行，多余的字母换行显示。

对于CJK (CJK 指中文/日文/韩文) 。这里以中文举例

以上的6个css属性除了word-break: keep-all其它5个属性效果一致。

  1. word-break: keep-all：只能在半角空格或连字符处换行，没有半角空格或连字符处超出部分溢出显示。
  2. 其它5个属性：文字超出部分换行显示。

实现文字超过省略号

结语

这个方法可以用来实现禁止剪切和复制网页内容…

----------本文结束感谢您的阅读-----------
谢谢打赏，好人一生平安