本教程操作环境:windows10系统、css3版、DELL G3电脑css溢出图片隐藏怎么实现?CSS实现图片或文字溢出隐藏效果溢出隐藏文字溢出操作效果图:单行+溢出隐藏.nameBox { // 文字不允许换行(单行文本
本教程操作环境:windows10系统、css3版、DELL G3电脑
css溢出图片隐藏怎么实现?
CSS实现图片或文字溢出隐藏效果
效果图:单行+溢出隐藏
.nameBox {
// 文字不允许换行(单行文本)
white-space: nowrap;
// 溢出部分隐藏
overflow: hidden;
// 文本溢出后,使用 ... 代替
text-overflow: ellipsis;
margin-right: 3px;
}
图片内容放大框架不变(溢出隐藏overflow:hidden)
<div class="img-box">
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff711761e8db8b85f993ebed08172a0e?rik=MVGhEvoXVGZZ8A&riu=Http%3a%2f%2fdl.ppt123.net%2fpptbj%2f201206%2f2012060908533798.jpg&ehk=knHJW8AKQ42Ak6HdIFUL9%2fQLuT%2b8yG4SmmDGN4rREsE%3D&risl=&pid=ImgRaw&r=0">
</div>
<style>
.img-box{
width: 400px;
overflow: hidden;
background-color:teal;
}
img{
display: block;
width:100%;
animation: a1 4s linear infinite alternate;
}
@keyframes a1{
100%{
transfORM: scale(1.5);
}
}
</style>
--结束END--
本文标题: css溢出图片隐藏怎么实现
本文链接: https://www.lsjlt.com/news/206918.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0