css英文单词的断句方法

英文单词的断句方法

浏览器自带断句换行方式

• 针对英文单词：

  • 某个英文单词很长，父容器容不下：单词会直接显示到容器外面
    [图片上传失败...(image-a4df01-1515594703028)]

  • 某一个有两个单词，两个单词的长度之和大于容器的宽度：第二个单词会自动的到下一行，出现第一行没有占满却换行了
    [图片上传失败...(image-1bfe20-1515594703028)]

word-wrap：break-word

• 作用： 单词内断句
  • 某个英文单词很长，父容器容不下：会自动根据父容器的宽度在单词内截断，多的放到下一行
    [图片上传失败...(image-c83688-1515594703028)]
  • 某一个有两个单词，两个单词的长度之和大于容器的宽度：第二个单词会自动的到下一行，出现第一行没有占满却换行了（这个作用和浏览器一致）
• 总结：
  • 只会在一个单词的长度超过父容器的长度的时候断开换行
  • 当了两个单词长度大于容器时，和浏览器处理方式一致

word-break:break-all

• 某个英文单词很长，父容器容不下：会自动根据父容器的宽度在单词内截断，多的放到下一行
• 某一个有两个单词，两个单词的长度之和大于容器的宽度：
  • 第二个单词继续在当前行
  • 当第二个单词的长度超出容器的时候直接截断第二个单词放到下一行[图片上传失败...(image-81b443-1515594703028)]
• 总结
  • 当单个单词长度超过容器长自动断开 换行
  • 当了两个单词长度大于容器时，将第二个单词超出的部分断开放在第二行
  • 节省空间避免第一行没占满就占第二行