有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法：
1、word-break:normal | break-all |keep-all
normal 使用浏览器默认的换行
break-all 允许单词内换行即允许单词拆开显示
keep-all 不允许拆开单词显示，连字符除外
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 120px; height: 25px; border: 1px solid red; margin: 100px; } div:first-child { word-break: normal; } div:nth-child(2) { word-break: break-all; } div:last-child { word-break: keep-all; } </style> </head> <body> <div> my name is abcd . </div> <div> my name is abcd . </div> <div> my name is ab-cd . </div> </body> </html>
结果如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 120px; height: 25px; border: 1px solid red; margin: 100px; } div:first-child { white-space: normal; } div:last-child { white-space: nowrap; } </style> </head> <body> <div> 这是一行超级长的文字文字文字 </div> <div> 这是一行超级长的文字文字文字 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 120px; height: 25px; border: 1px solid red; margin: 100px; } div:first-child { text-overflow: clip; } div:last-child { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> </head> <body> <div> 这是一行超级长的文字文字文字 </div> <div> 这是一行超级长的文字文字文字 </div> </body> </html>
原文：https://www.cnblogs.com/Assist/p/9639774.html
