文字溢出处理、背景图片、企业开发经验

不少时候，单行文字所占宽度大于容器宽，就会产生文字溢出，因此如今主要是介绍一下文字溢出的解决办法和背景图片的一些知识。

1.文字溢出容器处理：

（1）单行文本：

三件套（css代码部分）：

white-space：nowrap；（禁止换行）
overflow：hidden；（溢出部分隐藏）
text-overflow：ellipsis；（文字打点）(当文字的宽度小于容器的宽度时，没有变化，当文字的宽度大于容器的宽度时就打点显示)
复制代码

（2）多行文本只作截断，不作打点（打点是手写上去的）:

先让行高和容器的高成比 显示（好比容器40px，line-height是20px，你也就只能放两行，因此得把数字算好），而后溢出部分隐藏处理。

2.背景图片：

[

1. background-image：url（这里填路径）；：引入背景图片
2. background-size：（单位是px/%，这里填两个值）；：背景图片的大小（宽、高）
3. background-repeat：no-repeat：图片不重复（禁止平铺），默认为 repeat，就是当图片铺不满容器的时候，他会重复的铺满容器，no-repeat 就是禁止平铺，铺不满就铺不满。还有两个值 repeat-x（x 轴平铺）、repeat-y（y 轴平铺）。通常咱们用的是 no-repeat。
4. background-position：；图片的位置 xy，（在 css 里，x 轴右为正，y 轴下为正），两个值也能够用 left/right/top/bottom/center 或者 百分数来使用，例如，left top 即为左上方，50% 50%就是正中间，即 center center。（通常咱们也尽可能写center center，由于这里50%和以前的50%不一样）

]

3.企业开发经验

（1）图片替代文字:

当咱们网速很差的时候，图片加载不出来（系统会把 css 和 js 屏蔽掉），就得用文字代替， 当网速好的时候显示图片，隐藏文字，这就须要在 HTML 里边加上文字信息（这个只能用于背景图片）

方法一：text-indent：；（文字首行缩进，值要大于容器的宽），而后white-space：nowrap；（禁止换行），再加上overflow：hidden；（文字溢出部分隐藏）就能够了。

方法二：背景上是能够展现背景图片和背景颜色的，可是不能展现内容，那么就给容器hight：0px；（先把容器的高清零），而后再用padding-top,padding就会把图片撑开，这时图片就显示出来了，文字就顶出去了，再overflow：hidden； （文字溢出部分隐藏）就能够了。

注意：

行级元素只能套行级元素，块级元素能够套任何元素，可是，p 标签里不能套 div，不然p会被砍断（并且a标签里也不能套 a 标签）。