文本溢出处理

单行文字溢出

css处理

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

有三个属性
text-overflow: ellipsis; 设置字体超出变成....
overflow: hidden; 溢出 隐藏
white-space: nowrap;结尾空间(如果是半个字就不显示)

多行文字溢出

手动写吧
背景处理

    background-image:url(../img/cate_23.png);
    background-size: 100px 100px;
    background-repeat: no-repeat;//如果图像填充不了就会重复很多个图像,加上此属性就可以没有重复填充,repeat-x  -y等参数
    background-position: 50% 50%;

图片代替文字(当网速慢的时候,加载xml,不加载css的图像处理)
1,把高度设置成0设置padding-top: 90px;把图形撑开再设置overflow: hidden;隐藏文字
2,/* text-indent: 190px;
white-space: nowrap;
overflow: hidden; */
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
p不能嵌套块级元素
a不能嵌套a标签
margin: 0 auto;上下左右
当文本里面有文本时外面的文本会对此进行对齐
文本对齐线

vertical-align: -5px;
    vertical-align: middle;//中对其

overflow-x: hidden;body取消横向
vertical-align:middle

你可能感兴趣的:(文本溢出处理)