图例:
一、强制一行展示
/* 强制一行显示 */
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: nowrap; /*规定段落中的文本不进行换行 */
二、多行展示
/* 自定义行数 */
overflow: hidden;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示。*/
-webkit-line-clamp: 2; /*设置需要显示的行数*/
-webkit-box-orient: vertical; /*设置伸缩盒子的子元素排列方式(从上到下垂直排列)*/
注意:
不能加 padding
和height
属性。
三、具体代码
<style>
.aa{
height: 100px;
width: 200px;
border: 1px solid red;
margin: 100px;
padding: 10px;
/* 强制一行显示 */
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: nowrap; /*规定段落中的文本不进行换行 */
}
.bb {
width: 200px;
border: 1px solid red;
margin: 100px;
/* 自定义行数 */
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示。*/
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="aa">我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,</div>
<div class="bb">我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,我要吃火锅,</div>
<script src="./jquery-1.12.4.min.js" type="text/javascript"></script>
</body>