zoukankan      html  css  js  c++  java
  • 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;还原换行;

  • 相关阅读:
    RestTemplate proxy 设置方式
    一道关于主键,闭包的软考题------关系代数复习-码,范式,闭包求解
    MyBatis的XML中使用内部类的方式
    MyBatis SpringBoot 杂记
    服务器安装笔记
    UML符号
    npm 设置代理
    国外一家代码网站
    设计模式复习
    docker 列出每个容器的IP
  • 原文地址:https://www.cnblogs.com/sq45711478/p/10437899.html
Copyright © 2011-2022 走看看