一.溢出容器要打点展示
1.单行文本
<p>这是一个单行文本，溢出内容要打点展示</p>
p{
width:200px;
height:20px;
line-height:20px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
2. 多行文本
多做截断处理
二.图片代替文字
在css样式无法加载时，为了确保a链接还能呈现，正常运行网站，有如下解决方案
- 将文字缩进出背景图片，隐藏多余部分。
将提示文字正常隐藏
当css正常展示时，淘宝网三字会被隐藏
- 第二种解决方法
背景图和背景颜色是可以填充盒模型中padding部分的，但是文字不能。用padding-top代替a标签高度。所以，自然可将提示文字向下撑出边框外。
image.png
三. 补充
- 两块级元素嵌套，如何使得内部的块级元素居中，且左右压缩时，先压缩两边区域。
margin: 0 auto;
margin:0 auto
- 凡是带有inline的元素都有文本类特点，叫文本类元素
inline，inline-block
image元素之间有空格的话，会自带空白分隔符（上传服务器时会自动压缩），解决的最好办法就是把空格去掉。 - position:absolute;和float:left/right;
这俩属性一旦设置了一个，这个元素就会在内部被设置为display:inline-block; - 文本与文字是底对齐。
- 如果，一个行级块元素或文本类元素，内部存在文字，那么外部的文字还是会与内部的文字底对齐。
- 对齐线调整属性：vertical-align
