• 一行或多行文本内容溢出显示省略号


    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap:
    

     text-overflow 属性规定当文本溢出包含元素时发生的事情,值为clip时修剪文本;值为ellipsis显示省略符号来代表被修剪的文本;值为string时使用给定的字符串来代表被修剪的文本。

         white-space属性设置如何处理元素内的空白。

    描述
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

    二、div内显示两行或三行,超出部分用省略号显示

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;(行数)
        -webkit-box-orient: vertical;
    

      

    -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
  • 相关阅读:
    各种方便有用的文档资源的网站
    微信小程序swiper实现轮播图
    python使用小记录
    机器作曲参考
    panda读取合并表格数据并保存为pkl格式并读取
    深度学习相关的论文的下载地址
    python读取文本文件
    Python listdir获取某个目录下所有文件名
    Numpy 写3层神经网络拟合sinx
    NLP学习参考
  • 原文地址:https://www.cnblogs.com/niujie/p/6537854.html
Copyright © 2020-2023  润新知