css补充（四）文字溢出处理，背景图片与文字处理

一.溢出容器要打点展示

1.单行文本

这是一个单行文本，溢出内容要打点展示

p{
    width:200px;
    height:20px;
    line-height:20px;
    border:1px solid black;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

2. 多行文本

多做截断处理

二.图片代替文字

在css样式无法加载时，为了确保a链接还能呈现，正常运行网站，有如下解决方案

1. 将文字缩进出背景图片，隐藏多余部分。

将提示文字正常隐藏

当css正常展示时，淘宝网三字会被隐藏

2. 第二种解决方法
   背景图和背景颜色是可以填充盒模型中padding部分的，但是文字不能。用padding-top代替a标签高度。所以，自然可将提示文字向下撑出边框外。

image.png

三. 补充

1. 两块级元素嵌套，如何使得内部的块级元素居中，且左右压缩时，先压缩两边区域。
   margin: 0 auto;

margin:0 auto

2. 凡是带有inline的元素都有文本类特点，叫文本类元素
   inline，inline-block
   image元素之间有空格的话，会自带空白分隔符（上传服务器时会自动压缩），解决的最好办法就是把空格去掉。
3. position:absolute;和float:left/right;
   这俩属性一旦设置了一个，这个元素就会在内部被设置为display:inline-block;
4. 文本与文字是底对齐。

• 如果，一个行级块元素或文本类元素，内部存在文字，那么外部的文字还是会与内部的文字底对齐。
• 对齐线调整属性：vertical-align