针对文字溢出，背景图片处理的一些小知识
程序员文章站
2022-04-24 14:09:25
...
处理单行文本溢出打省略号的功能：
对于这个问题需要先来了解三个属性和相应的属性值
1、white-space:nowarp; 作用： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
2、overflow:hidden; 作用：属性overflow可以检索或设置当对象的内容超过其指定高度及宽度时如何管理内容，属性值hidden则是将超出对象尺寸的内容进行裁剪，将不出现滚动条。
3、text-overflow:ellipsis; 作用：当对象内文本溢出时显示省略标记（…）。
（对于一些属性和属性值的作用可以通过css手册了解）
<html>
<head>
<title>针对文字溢出，背景图片处理的一些小知识</title>
</head>
<body>
<div style="font-size:20px;
width: 200px;
height:20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;">
针对文字溢出，背景图片处理的一些小知识
</div>
</body>
</html>
通过此代码，利用以上三个属性和相应的属性值，我们可以达到单行文本溢出打省略号的目的：
对于多行文本的溢出问题，我们只需要做截断处理即可，直接用overflow：hidden，把溢出部分裁剪掉即可，若非要加省略号可以通过手动的方法
接着来讨论一下背景图片的处理
<html>
<head>
<title>针对文字溢出，背景图片处理的一些小知识</title>
</head>
<body>
<div style="font-size:20px;
width: 300px;
height:0;
padding-top:300px;
border: 1px solid black;
background-image: url(雷狮.jpg);
background-size:300px 300px;
background-repeat: no-repeat;
">
雷狮是我的！！！！
</div>
</body>
</html>
显示结果：
通过使用 background-image，background-size，background-repeat和background-position这几个属性便可以处理背景图片的相关问题了。