<style>
div{
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 强制不换行,但文字会溢出到盒子外部 */
white-space: nowrap;
}
</style>
</head>
<body>
<div>啥也不说,此处省略1万字</div>
</body>
运行结果:
div{
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 1、强制不换行,但文字会溢出到盒子外部 */
white-space: nowrap;
/* 2、overflow:hidding;超出部分隐藏 */
overflow: hidden;
/* 3、文字用省略号代替超出的部分 */
text-overflow: ellipsis;
}
然后就行了: