css - 单词的自动换行问题

寻技术 Html/CSS 2023年07月28日 71

转载自:解决文档中有url链接时被强制换行的问题

问题

当行内出现很长的英文单词或者url的时候,会出现自动换行的问题,为了美化页面,往往会希望这些很长的英文单词或者url能够断开来,超出的部分换行到下一行。

解决方案

可以通过使用两个属性来实现该需求:

word-wrap:break-word;
word-break:break-all;

word-wrap

word-wrap用来控制换行,有两种取值:
  normal
  break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

word-break

word-break用来控制断词,有三种取值:
  normal
  break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
  keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

关闭

用微信“扫一扫”