文字一行展示

作者: ImmortalSummer | 来源:发表于2020-03-10 17:07 被阅读0次

文字一行展示
跑马灯功能实现
滚动播放Label封装
Vue插槽（一）基础使用
卡片布局以及鼠标悬浮展示全部
各种居中以及文字一行内展示
CSS世界—元素尺寸
多行省略展示
Android中TextView文字设置不同的颜色
free

要求: 文字一行展示, 如果展示不开, 显示省略号

        /* 电脑端 */
       p{
            height: 36px;
            line-height: 36px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            white-space:nowrap;
        }
        /* 移动端 */
      p{
            overflow: hidden;
            text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            display: box;
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

3.png

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        p{
            font-size: 20px;
            background-color: teal;
            width: 150px;
        }
        /* 电脑端 */
        #div1 p{
            height: 36px;
            line-height: 36px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            white-space:nowrap;
        }
        /* 移动端 */
        #div2 p{
            overflow: hidden;
            text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            display: box;
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div id="div0">
        <p>这是要显示的数字0123456789</p>
    </div>
    <div id="div1">
        <p>这是要显示的数字0123456789</p>
    </div>
    <div id="div2">
        <p>这是要显示的数字0123456789</p>
    </div>
</body>
</html>