CSS的宽度与高度

最新推荐文章于 2024-04-16 22:29:27 发布

weixin_34273046

最新推荐文章于 2024-04-16 22:29:27 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/ronyjay/p/8859645.html

版权

css实现单行文本的溢出显示省略号

 <style>
        .demo {
            white-space: nowrap; #不折行
            overflow: hidden;　　#溢出隐藏
            text-overflow: ellipsis; #使用省略号来代替被修剪的文本
        }
    </style>

css实现多行文本的溢出显示省略号

 <style>
        .demo {          
　　　　　　　　display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>

文字两端对齐

 　　　　 div {
            border: 1px blue solid;
            font-size: 20px;
        }
    
        span {
            border: 1px red solid;
            text-align: justify;
            display: inline-block;
            width: 5em;
            line-height: 20px;
            height: 20px;
            overflow: hidden;
        }
    
        span:after {
            display: inline-block;
            content: '';
            width: 100%;
        }
    </style>
    </head>
    
    <body>
        <div>
            <span>姓名</span>
            <br>
            <span>联系方式</span>
        </div>
    
    </body>

转载于:https://www.cnblogs.com/ronyjay/p/8859645.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34273046

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的宽度与高度

css实现单行文本的溢出显示省略号 <style> .demo { white-space: nowrap; #不折行 overflow: hidden;　　#溢出隐藏 text-overflow: ellipsis; #使用省略号来代替被修剪的文本 } ...
复制链接

扫一扫