1、默认情况，它是自动换行的；
2、设置文字不换行white-space:nowrap，强行撑开；
3、如果不希望容器被撑开，那就给文字加省略号：
<style type="text/css">.divbox{ width:150px white-space:nowrap overflow:hidden text-overflow:ellipsis}
</style>
</head>
<body>
<div class="divbox">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
明人不说暗话，直接上例子
由于富文本属于长文本，在页面上我们会有这种超出隐藏的功能需求，
如果是纯文本的话，我们大可以用slice截取字符串的方式来先显示几个字的方式，
但是由于富文本是由不同的html标签组成，这样的我们就会显得棘手。
如果我们不用蒙版遮罩的方式，就会变成这样
不做处理的话，就觉得比较生硬，所以用上了mask-image + linear-gradient 就会显得比较优雅。
这里只是用了mask-image的一些属性，当然mask-image能够做的不止这些，具体有兴趣的可以去摸索看看咯。
方法和详细的操作步骤如下：
1、第一步，打开html编辑器并创建一个新的html文件，例如：index.html，见下图，转到下面的步骤。
2、第二步，完成上述步骤后，在index.html中的<style>标记中，输入CSS代码，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，浏览器运行index.html页面。
如果此时文本超过2行，则多余的部分将自动显示为省略号，见下图。这样，就解决了这个问题了。
