一.溢出容器要打点展示
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链接还能呈现,正常运行网站,有如下解决方案
- 将文字缩进出背景图片,隐藏多余部分。
- 第二种解决方法
背景图和背景颜色是可以填充盒模型中padding部分的,但是文字不能。用padding-top代替a标签高度。所以,自然可将提示文字向下撑出边框外。
三. 补充
- 两块级元素嵌套,如何使得内部的块级元素居中,且左右压缩时,先压缩两边区域。
margin: 0 auto;
- 凡是带有inline的元素都有文本类特点,叫文本类元素
inline,inline-block
image元素之间有空格的话,会自带空白分隔符(上传服务器时会自动压缩),解决的最好办法就是把空格去掉。 - position:absolute;和float:left/right;
这俩属性一旦设置了一个,这个元素就会在内部被设置为display:inline-block; - 文本与文字是底对齐。
- 如果,一个行级块元素或文本类元素,内部存在文字,那么外部的文字还是会与内部的文字底对齐。
- 对齐线调整属性:vertical-align