CSS英文字符自动换行
多个英文单词默认自动换行，单行字母不自动换行
<!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>
关注公众号：拾黑（shiheibook）了解更多
友情链接：
下软件就上简单下载站：https://www.jdsec.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/
程序猿
关注网络尖刀微信公众号
