zoukankan      html  css  js  c++  java
  • 一行或多行文本内容溢出显示省略号

    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,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
  • 相关阅读:
    网络安装Centos的方法
    命令源码文件——Golang
    mosquitto: error while loading shared libraries: libwebsockets.so.12: cannot open shared object file
    centos7安装mysql初始化报错
    MQTT --- 操作行为
    MQTTv5.0 ---AUTH – 认证交换
    MQTT v5.0------SUBSCRIBE 报文
    MQTT --- Retained Message
    inux centos7下源码 tar安装5.7.26详解
    20. 有效的括号
  • 原文地址:https://www.cnblogs.com/niujie/p/6537854.html
Copyright © 2011-2022 走看看