CSS英文字符自动换行，强制不换行，超出显示省略号
作者：microsoftvs 更新时间：2019/10/30 13:14:28 点击数：4253
纯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>