<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

        p{

            width:300px;

            height:56px;

            overflow : hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            display: -webkit-flex;

            display: flex;

            display: -webkit-box-flex;

            -webkit-line-clamp: 3;

            -webkit-box-orient: vertical;

        }

    </style>

</head>

<body>

<p>

    static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

</p>

</body>

</html>

css3实现超过两行文字，超出用三个点显示（兼容性不行，仅供学习）的更多相关文章

  1. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  2. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  3. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  4. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  5. h5文字超出，两行显示，超出显示省略号

    最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 <html> <head> <style ...

  6. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  7. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 谈谈一些有趣的CSS题目-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. css实现一行居中显示，两行靠左显示，超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 在Linux命令行下令人惊叹的惊叹号（!）

    '!'符号在Linux中不但可以用作否定符号,还可以用来从历史命令记录中取出命令或不加修改的执行之前运行的命令.下面的所有命令都已经在Bash Shell中经过确切地检验.尽管我没有试过,但大多都不能 ...

  2. [3D] 基本概念

    [3D] 基本概念 环境光:对场景中所有的对象都提供了固定不变的照明.点光源:是从一个点发出的光.灯泡就可以理解为点光源.聚光源:正如它的的名字一样,是有方向和强弱的,电筒就是典型的聚光源. 方向光: ...

  3. git -C

    https://git-scm.com/docs/git -C <path> Run as if git was started in <path> instead of th ...

  4. echo输出到stderr

    echo "Your error message here" >&2 This is a normal echo (which goes to stdout), ho ...

  5. CUBRID学习笔记 35 net驱动错误码和信息 cubrid教程示例

    DO.NET Error Code Number Error Code Error Message Note 0 ER_NO_ERROR "No Error"   1 ER_NOT ...

  6. eclipse svn异常：RA layer request failed 的解决方案

    这几天svn总是出问题,网上搜了好多资料,今天才真正找到解决办法. RA layer request failedsvn: OPTIONS of 'https://192.168.0.104/svn/ ...

  7. Android——学习：线性布局权重分配

    LinearLayout在Android中被广泛使用,LinearLayout有一个比较重要的属性——android:layout_weight.按照字面理解就是该控件的权重,这个值默认是 零(0). ...

  8. ubuntu 卸载/安装 redis

    ubuntu 卸载redis 1. 卸载软件 apt-get remove redis 2. 清除配置 apt-get remove --purge redis 3. 删除残留文件 find / -n ...

  9. 没办法，还是要补一下js，回调函数（转载）

    <html> <head> <title>回调函数(callback)</title> <script language="javasc ...

  10. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...