CSS文字溢出处理,背景图片处理

本文深入探讨了CSS中处理文字溢出、背景图片及链接样式的关键技巧,包括如何优雅地处理单行或多行文本溢出,背景图片的精确定位,以及淘宝网链接样式的实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文字溢出

溢出容器,要打点展示

单行文本

 width: 300px;     
 height: 40px;     
 line-height: 20px;     
 border:1px solid black; 
/* 处理单行文本 */    
/* 设置超出部分容器不会换行 */    
white-space: nowrap;   
/* 设置超出部分隐藏 */    
overflow: hidden;    
/* 显示不了的用点表示 */    
text-overflow: ellipsis; 

多行文本

/* 多行文本,不做打点,只做截断 */     
overflow: hidden;   

背景图片处理

 width: 200px;    
height: 200px;    
border: 1px solid black;    
/* 背景图片处理 */    
 background-image: url(001.jpg);    
background-size: 100px 100px;    
/* 设置是否平铺 */    
background-repeat: no-repeat;   
/* 值可以用百分号形式,也可以用px ,也可以用left/right/bottom/top/center组合 */    background-position: 50% 50% ;

淘宝网标签

<a href="https://www.taobao.com/" target="_blank">淘宝网</a>
target是设置在新标签页打开

display: inline-block;    
text-decoration: none;    
color: #424242;    
width: 190px;    
 height:100px;     
border: 1px solid black;    
background-image:url(http://img.sj33.cn/uploads/allimg/201401/7-140126155409326.jpg);    
background-size: 190px 100px;

 /* 图片不加载时显示文字 第一种方法 */   
  text-indent: 200px;    
  white-space:nowrap ;    
 overflow: hidden; 
 
/* 第二种     padding不能写字但可以加载图片    
从新设置高度*/    
height:0;     
padding-top:100px ;    
overflow: hidden;

嵌套需要注意点

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
p标签不能套div
a标签不能套a标签

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值