CSS中的“超出…”是一种可视化效果，可用于防止内容在页面上溢出，并显示省略号。这种效果在Web设计中非常常见，因为它可以使文本、图像和其他内容在不妨碍布局或影响用户体验的情况下更加美观和易于理解。在本文中，我们将深入探讨CSS中的“超出…”效果，并且提供相关的CSS代码示例，以供参考。
一、CSS超出显示省略号
当内容超出了容器的最大宽度或高度时，可以使用“text-overflow”属性来实现省略号的效果。为了使这个效果生效，还需要将“white-space”属性设置为“nowrap”，它的作用是禁止内容换行。
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
二、CSS超出宽度省略号
此效果与上一个效果类似，但不同的是，在这种情况下，省略号将显示在文本或内容的末尾。同样需要将“white-space”属性设置为“nowrap”。
.container {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
}
.long-content {
display: inline-block;
white-space: nowrap;
}
三、CSS超出隐藏
当需要隐藏超出容器的内容时，可以设置“overflow”属性为“hidden”。
.container {
width: 200px;
height: 50px;
overflow: hidden;
}
四、CSS超出一行变省略号
当内容过长时，只需将“max-height”属性设置为一行的高度，并将“text-overflow”设置为“ellipsis”。
.container {
max-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
}
五、CSS超出换行
如果需要每次超出内容自动换行，可以将“word-wrap”和“word-break”属性设置为“break-word”。
.container {
width: 200px;
word-wrap: break-word;
word-break: break-word;
}
六、CSS超出加滑轮
当容器的最大宽度和高度固定时，可以设置“overflow”属性为“auto”，这将自动显示一个滚动条。
.container {
width: 200px;
height: 100px;
overflow: auto;
}
七、CSS超出部分隐藏
在文本的开头或结尾处显示省略号。
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content {
display: inline-block;
}
八、CSS超出部分显示省略号
省略号显示在超出容器的末尾。
.container {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.content {
white-space: nowrap;
display: inline-block;
}
九、CSS超出不边框省略
可以使用“clip”属性实现不使用边框的超出省略。
.container {
width: 200px;
height: 100px;
position: relative;
border: none;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
clip: rect(0, auto, auto, 0);
}
这些是CSS中几种常见的“超出…”效果。根据你的需求，选择这些效果中的任何一种即可实现你所需的效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/159645.html
微信扫一扫 
支付宝扫一扫 