一，单行省略
body 部分
<body>
<div class="box1">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
</body>
css部分
<style>
.box1 {
width: 100px;/* 设置文本的宽度 */
overflow: hidden;/* 溢出隐藏 */
white-space: nowrap;/* 文本不会换行，会在在同一行上继续 */
text-overflow: clip;/* 指定应向用户如何显示溢出内容 */
}
</style>
text-overflow: clip;会直接省略多余的部分
若设置text-overflow: ellipsis;则会在加上省略号的情况下，宽度不超过100px;
<style>
.box1 {
width: 100px;/* 设置文本的宽度 */
overflow: hidden;/* 溢出隐藏 */
white-space: nowrap;/* 文本不会换行，会在在同一行上继续 */
text-overflow: ellipsis;/* 指定应向用户如何显示溢出内容 */
}
</style>
二，多行省略
body部分
<body>
<h1>我我我我我我我我我我我我我我我我我我我</h1>
</body>
css部分
<style>
h1 {
width: 100px;
display: -webkit-box;/* 对象作为弹性盒子模型显示 */
overflow: hidden;/* 溢出隐藏 */
-webkit-box-orient: vertical;/* 设置伸缩盒子对象的子元素的排列方式 */
-webkit-line-clamp: 3;/* 设置块元素包含的文本行数 */
}
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
