文字溢出问题背景图片处理（笔记）_前端,背景图片固定大小,文字超出背景图片宽度的解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51664705/article/details/110008770

本文介绍了如何通过`white-space: nowrap`、`overflow: hidden`和`text-overflow: ellipsis`处理文字溢出问题，以及如何使用`background-image`, `background-size`, 和 `background-repeat`优雅地管理背景图片。还提及了利用首行缩进和padding实现不同布局的方法，适合快速响应不同网速场景。

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

文字溢出问题

取消换行的操作
white-space：nowrap；

溢出部分隐藏
overflow：hidden；
（text-overflow：ellipsis；溢出部分用…展示）

背景图片处理

照片的引入
background-image：url（文件名）；
照片的大小
background-size：xxx px xxx px；
（当照片的大小小于框会重复照片展示）
background-repeat：no-repeat；（不重复实现）
（-x x轴重复 -y y轴重复）
照片位置
background-position：top center（等等上下左右中）；
（居中 center center）

方法一：利用文字首行间距将文字溢出

    a{
    display: inline-block;
    text-decoration: none;
    color: aliceblue;
    width: 190px;
    height: 90px;
    border: 1px solid black;
    background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
    background-size: 190px 90px;
/*不能加载css后*/
    text-indent: 200px;/*(首行缩进  让文字弹出 a标签的框框) */
    white-space: nowrap;/*(让溢出文字不能换行)*/
    overflow: hidden;
}

 <a href="http://www.taobao.com" target="_blank">淘宝网</a>

方法二利用padding让文字溢出

a{
    display: inline-block;
    text-decoration: none;
    color: aliceblue;
    width: 190px;
    height: 0px;
    padding-top 90px;
    overflow: hidden;
    border: 1px solid black;
    background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
    background-size: 190px 90px;


}