1、首先打开html编辑器sublimeText，如下图
2、正常解决思路：设定文本长度，文本一行显示，多出的隐藏或者省略号显示。
利用的css属性white-space:nowrap;，如下图
3、利用的css属性word-break:keep-all;，如下图
4、下面是详细的代码操作，如下图
5、最总例子显示效果，如下图
例子一没有使用以上说的2个css属性：出现换行效果
例子二使用以上说的2个css属性：没有换行效果
6、最后附上全部代码，复制到html编辑器中就能实现效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0; }
.wrap1,.wrap2{width: 200px;border:1px solid #000000;
margin:0 auto;margin-bottom: 20px;}
.wrap1{
word-wrap: break-word;
}
.wrap2{
white-space:nowrap;
word-wrap: break-all;
}
</style>
</head>
<body>
111111111111111111111111111
22222222222222222222222222222
</body>
</html>
