在默认情况下,英文字符排列是这样的
多个英文单词默认自动换行,单行字母不自动换行
实例
<!DOCTYPE html> <html lang="en"> <head> <meta set="UTF-8"> <title>默认</title> <style> div{ width: 120px; height: 200px; border: 2px solid red; } </style> </head> <body> <div> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div> Let's see if the content here will wrap automatically. </div> </body> </html>
强制不换行css添加属性
white-space:nowrap;
实例
<!DOCTYPE html> <html lang="en"> <head> <meta set="UTF-8"> <title>强制不换行</title> <style> div{ width: 120px; height: 200px; border: 2px solid red; white-space:nowrap; } </style> </head> <body> <div> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div> Let's see if the content here will wrap automatically. </div> </body> </html>
自动换行
word-break:break-all;
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>强制英文单词换行</title> <style> div{ width: 120px; height: 200px; border: 2px solid red; word-break:break-all; } </style> </head> <body> <div> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div> Let's see if the content here will wrap automatically. </div> </body> </html>
超出显示省略号
text-overflow:ellipsis; overflow:hidden;
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超出显示省略号</title> <style> div{ width: 120px; height: 200px; border: 2px solid red; text-overflow:ellipsis; overflow:hidden; } </style> </head> <body> <div> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> </body> </html>