美文网首页
文本溢出处理

文本溢出处理

作者: 开心的小哈 | 来源:发表于2018-11-23 12:22 被阅读0次

    单行文字溢出

    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

    相关文章

      网友评论

          本文标题:文本溢出处理

          本文链接:https://www.haomeiwen.com/subject/gdcjqqtx.html