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>
最好是用块级元素，父级必须得有个宽度，如果不设置，列如移动端会出现横向滚动条
举例：
<div class='box'><h1>标题信息</h1>
<p>内容描述</p>
</div>
<style>
.box{width:100%}
.box h1{overflow:hiddentext-overflow:ellipsiswhite-space:nowrap}
</style>
white-space:nowrap //代表文字不自动换行
overflow:hidden //代表溢出隐藏
text-overflow:ellipsis //代表溢出省略号
很好用的，一般只设置溢出隐藏会出现截取一般的字，用这个属性就不会了，溢出会出现...
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{
width: 100px
overflow:hidden
text-overflow:ellipsis
display:-webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:2
}
3、浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示 。
