• div中只显示2行文字超出隐藏


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .div1{
    300px;
    overflow: hidden;//超出隐藏
    text-overflow: ellipsis;//超出文本设置为...
    display:-webkit-box;//将div1转换为盒子模型
    -webkit-line-clamp: 2;//设置div1的文本为2行
    -webkit-box-orient: vertical;//从顶部向底部垂直布置子元素
    /*white-space: initial;*/
    }
    </style>
    </head>
    <body>
    <div class="div1">
    偶尔会觉得,生活就是无休止的烦恼纠缠的总和。想要健健康康,却总是身体不适;
    想要安然入睡,却总是失眠多梦;想要平静度日,却总是风波不止。每天都在坚持,每天都在隐忍,
    然而,再坚强的心,也无法长期硬撑。本以为每天努力的微笑,就能换来一个明朗的晴空,
    一切却是徒劳无功。不想再虚假地笑了,也不会懦弱地哭了,那就这样面无表情地保持着一颗淡然的素心,
    默默前行吧。
    </div>


    </body>
    </html>

    注意:若在div1上还有父级,设置了white-space:nowrap;若想实现此效果需要在div1中加上white-space:initial;还原换行;

  • 相关阅读:
    公司的首页
    ubuntu 无法在Eclipse中识别 设备
    Eclipse 和 Android Studio 并存
    Eclipse 和 Android Studio 并存
    mac 节约硬盘空间
    一公升的眼泪
    Mac Ogre
    代码大全 是极好的
    Ogre Ubuntu 环境搭建
    cocos2d-x 环境搭建 c++ 版本
  • 原文地址:https://www.cnblogs.com/impossible1994727/p/6659330.html
Copyright © 2020-2023  润新知