文字溢出、背景图片

文字溢出

1. 单行文本

单行文本溢出容器，打点展示。

• 文本失去换行功能 white-space:noerap;

• 溢出部分隐藏 overflow:hidden;

• 打点展示 text-overflow:ellipsis;

2. 多行文本

多行打点在pc端不用技术实现，在移动端可以用技术实现。因为一般移动端的浏览器都是最新的浏览器，而pc端的浏览器是老版本的，对这样的技术不支持。

在pc端想要实现溢出容器打点展示，通常直接写。前端工程师把容器的宽度算好，把每个字的宽度算好，把值传到后台，然后计算，到哪一个字要溢出，直接写出来。

所以处理多行文本时，只做截断，不做打点。控制容器的高度正好是单行文本所占高度的倍数，然后使溢出的文本隐藏 overflow:hidden; 。

背景图片

添加背景图片 background-image:url(); 括号里直接写图片地址。

设置背景图片大小 background-size:100px 100px;

一张图片不能铺满整个容器时，默认处理会使图片重复的平铺在容器里。即 background-repeat:repeat; 。将 “repeat” 改为 “no-repeat” 图片就不会重复平铺。

还有一些值 : “x-repeat” 在x轴上平铺， “y-repeat” 在y轴上平铺。

background-position:100px 100px; 可以控制图片在容器中出现的位置。其中的值也可以填为 “left top” 之类的值，还可以填 “50% 50%”。

图片代替文字

浏览器采取默认加载策略时（当网络不好的时候，浏览器会屏蔽css和JavaScript），也要使网站的功能可以使用。

使有css时只显示图片，没有css时可以显示文字。

1. 先把文字缩进容器宽度 text-indent:100px;，缩进之后文字会自动换行。 使用white-space:noerap; 使文字不要换行。overflow:hidden; 隐藏溢出文字。

2. padding可以加背景图片而不能加内容。把容器的高度设置成0，然后设置 padding-top ,这样 padding-top 会把容器撑开。文字不会在容器里，背景图片可以在容器里。再隐藏溢出文字 overflow:hidden; 。