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

最新推荐文章于 2024-08-26 01:16:20 发布

原创最新推荐文章于 2024-08-26 01:16:20 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

学习内容专栏收录该内容

32 篇文章

订阅专栏

本文深入探讨了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;