<!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. nltk安装及wordnet使用详解

    环境:python2.7.10 首先安装pip 在https://pip.pypa.io/en/stable/installing/ 下载get-pip.py 然后执行 python get-pip. ...

  2. 插入排序和一点小感悟(c++版)

    很早之前,为了应付数据结构考试.花了一星期多看了数据结构,当时觉得也没什么难的. 过了老久,总算是招报应了,做笔试题发现其实所有理解只是在表面,实际上我并不会实现,确实是这样,学术这东西真没捷径,还是 ...

  3. C#操作oracle 到ExecuteNonQuery卡死不执行

    方法1: 可能大家都解决了,我也遇到这个问题,c#更新卡住,但是plsql更新没问题.一直没找到答案,无意中想起,可能是oracle的表锁定了. 用下面的方法,顺利解锁保存了. SELECT /*+  ...

  4. 【leetcode❤python】83. Remove Duplicates from Sorted List

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  5. Cheatsheet: 2015 01.01~ 01.31

    JAVA JVM Architecture Improving Lock Performance in Java 10 Best Java Tools That Every Java Programm ...

  6. Nodejs发送Post请求时出现socket hang up错误的解决办法

    参考nodejs官网发送http post请求的方法,实现了一个模拟post提交的功能.实际使用时报socket hang up错误. 后来发现是请求头设置的问题,发送选项中需要加上headers字段 ...

  7. SQL分组查询每组前几条数据

    /*第一种实现方法,效率低并且有错误*/ DECLARE @DD DATETIME SET @DD = GETDATE() SELECT a.GoodsID , a.Account , a.LastU ...

  8. <marquee>属性详解

    http://www.360doc.com/content/14/1210/17/9060464_431831883.shtml

  9. MATLAB模拟布丰投针实验

    MATLAB模拟布丰投针实验 标签(空格分隔): 算法 Buffon's Needle 桌面上有距离为a的若干平行线,将长度为L的针随机丢在桌面上,则这根针与平行线相交的概率是多少?假定L < ...

  10. ERROR 1044 (42000) ERROR 1142 (42000): SELECT command denied to user ''@'localhost' for table 'user'

    ERROR: Access denied for user 'root'@'localhost' (using password: NO)    发现:    mysql -u root@localh ...