zoukankan      html  css  js  c++  java
  • CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性:

    1.text-overflow : clip | ellipsis ;

    clip :  不显示省略标记(...),而是简单的裁切
    ellipsis :  当对象内文本溢出时显示省略标记(...)

    2.white-space: nowrap | normal | pre|pre-wrap|pre-line; 

    normal :默认。空白会被浏览器忽略。

    pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

    nowwrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

    pre-wrap:保留空白符序列,但是正常地进行换行。

    pre-line:合并空白符序列,但是保留换行符。

    单行例子:

        div {
             400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    多行时,主要用以下几个属性

    1: display: -webkit-box; 在父元素上设置该属性,子代元素能排列在同一水平上。

    2: -webkit-line-clamp: 3;可见行数。

    3:-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式 。

    多行例子

        div {
             400px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            overflow: hidden;
        }
  • 相关阅读:
    django-templates 模板变量
    实用代码
    游戏渠道后台上线
    游戏投放中的-LTV概念与价值
    转字符串格式format技巧
    mysql -数据库设计三范式
    OAuth2.0基本原理及应用
    回调函数
    GitHub 博客园快捷发布工具
    前端react antd加载错误解决
  • 原文地址:https://www.cnblogs.com/huzhuhua/p/11332175.html
Copyright © 2011-2022 走看看