zoukankan      html  css  js  c++  java
  • 多行文本显示省略号-2种方法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>多行文本省略号显示</title>
            <style>
                /* line-clamp不在css标准里面所有这几个属性必须配合使用才有效果 */
                /* 1.可以设置多行显示然后省略号 */
                .container{
                    display: -webkit-box;
                    -webkit-box-orient:vertical;/* 文本显示方向 */
                    -webkit-line-clamp:3;/* 文本显示的行数*/
                    overflow:hidden;
                } 
                /* 2.一行显示然后显示省略号 */
                .container{
                    white-space: nowrap;
                    overflow:hidden;
                    text-overflow: ellipsis;
                }
            </style>
        </head>
        <body>
            <div class="content">
                <h3>我存在的意义</h3>
                <div class="container">
                    在茫茫的人海
                    我普通到存在和消失没有区别可言
                    在经历了些许人生以后
                    在看了几本书以后
                    我愈发觉得自己是那么微不足道
    
                    可是
                    即便我再渺小
                    命运还是赋予了我存在的意义
                    我平平凡凡的活着
                    在父母眼里
                    我还算得是一个好孩子
                    在朋友眼里
                    我还算一个值得信赖的好友
    
                    如今
                    我不得不承认
                    正是他们让我有了存在的必要
                    当我回馈父母的爱时
                    他们脸上洋溢着幸福
                    当我竭力帮助我的挚友时
                    他们加倍的回报我
    
                    在我的短暂平淡的光阴里
                    我经历了两次被绝对信任
    
                    第一次
    
                    我对她说
                    “暑假我们也徒步走回去吧?”
                    她没有惊讶
                    没有质疑
                    只是坚定的说了两个字
                    “好啊!”
                    她是路痴
                    和我认识不到一年
                    跟着我从西安走到了陇西
                    六天时间里
                    风里雨里
                    我俩一起趟
                    途中我怀疑过自己
                    但是她信任的眼神逼着我必须相信自己
                    可是谁又知道
                    在这之前
                    在她的世界
                    可是对所有人都设了一道警戒线
                    独独对我越过了所有
                    直达信任的彼岸
                    这得是多么信任一个人
                    才会把潜意识里戒心也融化呢
    
                    第二次
    
                    那晚七点
                    我刚下班
                    就接到他的电话
                    这么准时
                    电话那边的他
                    已经哽咽
                    但是强忍着
                    后来直接泣不成声
                    一个堂堂七尺男儿
                    把自己的尊严和面子看得重于生命
                    却在我面前哭成了孩子
                    那般无奈
                    那般惶恐
                    那般不知所措
                    他是一个把所有苦痛都自己扛起来的好男儿
                    却在第一时间选择了相信我
                    把所有的委屈和着眼泪一起摆在我面前
                    这得是多么相信一个人才可以做到的
                    把一个那么真实
                    那么脆弱的自己展示在我一介女流之眼前
    
                    我何德何能
                    让你们这么信任于我
                    你们知道这种被信任的感觉何其微妙吗
                    它让我觉得我的存在是那么有意义
                    我不仅仅只是一个披着人皮的人而已
                    我有意义
                    有存在的意义
    
                    我可以在活着的同时
                    让你们没有后顾之忧的绝对信任我
                </div>
            </div>
        </body>
    </html>
  • 相关阅读:
    碰撞的蚂蚁 牛客网 程序员面试金典 C++ Java Python
    空格替换 牛客网 程序员面试金典 C++ Python
    穿点最多的直线 牛客网 程序员面试金典 C++
    第K个数 牛客网 程序员面试金典 C++ Python
    React Native之图片/宽高/字体平台适配
    echarts玩转图表之矩形树图
    如何评价 Vue 的 Function-based Component?
    如何写一个像axios那样牛叉的请求库
    精读《Nuxtjs》
    react hooks系列之useRef
  • 原文地址:https://www.cnblogs.com/changyuqing/p/12705941.html
Copyright © 2011-2022 走看看